New website on Docusaurus

website-new/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website-new/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website-new/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website-new/docs/About/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "About",
+  "position": 1
+}

website-new/docs/About/ecosystem.mdx

@@ -0,0 +1,48 @@
+---
+section: About
+title: Ecosystem
+slug: /docs/ecosystem/
+sidebar_position: 30
+---
+
+# Ecosystem
+
+This is an incomplete list of awesome things built with SVGR.
+
+<carbon-ad />
+
+## Tools that includes official SVGR support ✨
+
+- [Create React App](https://facebook.github.io/create-react-app/)
+- [Parcel](https://parceljs.org/)
+- [React SSR Setup](https://github.com/manuelbieh/react-ssr-setup)
+- [SVG Gobbler Browser Extension](https://github.com/rossmoody/svg-gobbler)
+
+## Conferences
+
+- [SVGR or how a simple problem became a 2K stars library - Greg Bergé (@neoziro) at @ReactEurope 2018](https://www.youtube.com/watch?v=geKCzi7ZPkA)
+
+## Articles
+
+- [How to use SVG Icons as React Components?](https://www.robinwieruch.de/react-svg-icon-components/)
+- [Config Storybook 4 & 5 to use SVGR webpack plugin](https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004)
+- [Flexible SVG components in React](https://medium.com/@timothyde/flexible-svg-components-in-react-788b108c61c3)
+- [Using SVG as Component in React Native 0.57](https://medium.com/@prathik_63905/using-svg-as-component-in-react-native-0-57-76f6238ec80a)
+
+## Plugins
+
+- [gatsby-plugin-svgr](https://www.npmjs.com/package/gatsby-plugin-svgr) - SVGR plugin for [Gatsby](https://gatsbyjs.org)
+- [cogs-transformer-svgr](https://www.npmjs.com/package/cogs-transformer-svgr) - SVGR Transformer for [cogs](https://github.com/caseywebdev/cogs)
+- [chin-plugin-svgr](https://www.npmjs.com/package/chin-plugin-svgr) - SVGR plugin for [chin](https://github.com/chinjs/chin)
+- [@nice-js/svgr-loader](https://www.npmjs.com/package/@nice-js/svgr-loader) - SVGR loader for Nice.js
+- [bs-svgr](https://www.npmjs.com/package/bs-svgr) - SVGR plugin for BuckleScript (Reason)
+- [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr) - SVGR loader for [Vite](https://vitejs.dev/)
+- [SVGR for Figma](https://www.figma.com/community/plugin/749818562498396194/SVG-to-JSX)
+- [esbuild-plugin-svgr](https://github.com/kazijawad/esbuild-plugin-svgr)
+
+## Macros & Babel Presets
+
+- [svgr.macro](https://www.npmjs.com/package/svgr.macro) - Babel macro for SVGR
+- [babel-preset-svgr](https://github.com/birdofpreyru/babel-preset-svgr)
+
+If you have something to share, please submit a PR on [GitHub project](https://github.com/gregberge/svgr).

website-new/docs/About/supporting-svgr.mdx

@@ -0,0 +1,20 @@
+---
+section: About
+title: Supporting SVGR
+slug: /docs/supporting-svgr/
+sidebar_position: 20
+---
+
+# Supporting SVGR
+
+Helps SVGR to keep up with React ecosystem.
+
+I ([Greg Bergé](https://gregberge.com/)) am the creator of SVGR and the only maintainer. As of today SVGR is used in almost all React projects. It is downloaded 4.5M times per week, it's huge! To help you realize what it represents, [Next.js](https://nextjs.org/) is downloaded 2M times per week.
+
+Maintaining a project like SVGR takes time, answering to users, fixing bugs, follow the React features, releasing updates. If you are a developer, you know that even the smallest task takes time.
+
+SVGR is not sponsored by any of the big project using it and not sponsored by any of big company using it. I am not asking for having a good salary like some maintainers do, no. But I would really appreciate a small encouragement ☺️.
+
+The easiest way for that is [sponsoring me on GitHub](https://github.com/sponsors/gregberge) or [donating on OpenCollective](https://opencollective.com/svgr).
+
+Thank you! ❤️

website-new/docs/About/what-is-svgr.mdx

@@ -0,0 +1,99 @@
+---
+section: About
+title: What is SVGR?
+slug: /docs/what-is-svgr/
+sidebar_position: 10
+---
+
+# What is SVGR?
+
+SVGR is an universal tool to transform SVG into React components.
+
+SVGR takes a raw SVG and transforms it into a ready-to-use React component.
+
+For example, take the following SVG:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  width="48px"
+  height="1px"
+  viewBox="0 0 48 1"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+  <title>Rectangle 5</title>
+  <desc>Created with Sketch.</desc>
+  <defs></defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g
+      id="19-Separator"
+      transform="translate(-129.000000, -156.000000)"
+      fill="#063855"
+    >
+      <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
+        <g id="Content" transform="translate(0.000000, 64.000000)">
+          <g id="Group" transform="translate(24.000000, 56.000000)">
+            <g id="Group-2">
+              <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
+```
+
+After running SVGR, we got:
+
+```js
+import * as React from 'react'
+
+const SvgComponent = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}>
+    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
+  </svg>
+)
+
+export default SvgComponent
+```
+
+To achieve this result, SVGR applies several complex transformations:
+
+- Optimizing using [SVGO](https://github.com/svg/svgo)
+- Transforming HTML into JSX in several steps:
+  - Converting SVG into HAST (HTML AST)
+  - Converting HAST into Babel AST (JSX AST)
+  - Transforming AST using Babel (renaming attribute, changing attribute values, ...)
+- Wrapping JSX into a React Component
+- Converting Babel AST into code
+- Formatting code using [Prettier](https://prettier.io/)
+
+This complex pipeline makes SVGR a reliable, safe and extendable tool.
+
+It can be used through:
+
+- [Online playground](/playground/)
+- [Command line tool](/docs/cli/)
+- [webpack loader](/docs/webpack/)
+- [Node.js API](/docs/node-api/)
+- [rollup.js plugin](/docs/rollup/)
+- [parcel plugin](/docs/parcel/)
+- [Next.js plugin](/docs/next/)
+
+It is just the list of official integrations, but the community around SVGR is huge. If you are looking for a plugin, it probably already exists. Give a look to [ecosystem](/docs/ecosystem/) to learn more about existing SVGR integrations.
+
+If you want to learn more, this conference talk is a great introduction:
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/geKCzi7ZPkA"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+/>

website-new/docs/Advanced/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Advanced",
+  "position": 4
+}

website-new/docs/Advanced/custom-templates.mdx

@@ -0,0 +1,125 @@
+---
+section: Advanced
+title: Custom Templates
+slug: /docs/custom-templates/
+sidebar_position: 6
+---
+
+# Custom Templates
+
+Customize template to personalize the result React component.
+
+<carbon-ad />
+
+## Custom Component template
+
+A custom template takes place in a file that exports a "template function".
+
+This function is called in a babel plugin: `babel-plugin-transform-svg-component` and must returns a Babel AST. If you are not familiar with all Babel stuff, you should read [this guide](https://github.com/jamiebuilds/babel-handbook).
+
+- `variables`: All pre-compiled variables by SVGR
+  - `componentName`: The component name
+  - `props`: The properties
+  - `interfaces`: All necessary interfaces (typescript)
+  - `imports`: All necessary imports
+  - `exports`: The export of the component
+  - `jsx`: The JSX part of the component
+- `context`:
+  - `tpl`: A built-in template-tag function to create template
+  - `options`: Options passed to `babel-plugin-transform-svg-component`
+
+The following template is the default template used by SVGR. It is a good idea to start with it:
+
+```js
+const template = (variables, { tpl }) => {
+  return tpl`
+${variables.imports};
+
+${variables.interfaces};
+
+const ${variables.componentName} = (${variables.props}) => (
+  ${variables.jsx}
+);
+
+${variables.exports};
+`
+}
+
+module.exports = template
+```
+
+Let's try something very simple. You want to add some PropTypes to your component:
+
+```js
+const propTypesTemplate = (
+  { imports, interfaces, componentName, props, jsx, exports },
+  { tpl },
+) => {
+  return tpl`${imports}
+import PropTypes from 'prop-types';
+${interfaces}
+
+function ${componentName}(${props}) {
+  return ${jsx};
+}
+
+${componentName}.propTypes = {
+  title: PropTypes.string,
+};
+
+${exports}
+  `
+}
+
+module.exports = propTypesTemplate
+```
+
+As you can see it is very natural, we just add code and use AST parts in the template.
+
+### Use with CLI
+
+You can use component template in the CLI:
+
+```sh
+npx @svgr/cli --template template.js -- my-icon.svg
+```
+
+### Use with config
+
+Specify the template in `.svgrrc.js`:
+
+```js
+// .svgrrc.js
+module.exports = {
+  template: require('./my-template'),
+}
+```
+
+## Custom index template
+
+When you use the CLI with `--out-dir` option, an index file is automatically generated.
+
+The customization is the same, a file that exports a function:
+
+```js
+const path = require('path')
+
+function defaultIndexTemplate(filePaths) {
+  const exportEntries = filePaths.map((filePath) => {
+    const basename = path.basename(filePath, path.extname(filePath))
+    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
+    return `export { default as ${exportName} } from './${basename}'`
+  })
+  return exportEntries.join('\n')
+}
+
+module.exports = defaultIndexTemplate
+```
+
+### Use with CLI
+
+You can use component template in the CLI:
+
+```sh
+npx @svgr/cli --index-template index-template.js -- my-icon.svg
+```