docs: svg as component example leveraging swc instead of babeljs (#36410

)

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

examples/svg-components/.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+pnpm-lock.yaml

examples/svg-components/README.md

@@ -1,6 +1,6 @@
-# SVG components example
+# SVG components example with SWC
 
-This example uses a custom `.babelrc` to add support for importing `.svg` files and rendering them as React components. [babel-plugin-inline-react-svg](https://www.npmjs.com/package/babel-plugin-inline-react-svg) is used to handle transpiling the SVGs.
+This example uses svg components without disabling SWC using @svgr/webpack to import `.svg` files and rendering them as React components. [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack).
 
 ## Deploy your own
 

examples/svg-components/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/svg-components/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+ reactStrictMode: true,
+ webpack(config) {
+ config.module.rules.push({
+ test: /\.svg$/i,
+ issuer: /\.[jt]sx?$/,
+ use: ['@svgr/webpack'],
+ })
+
+ return config
+ },
+}

examples/svg-components/package.json

@@ -11,6 +11,9 @@
  "react-dom": "^17.0.2"
  },
  "devDependencies": {
- "babel-plugin-inline-react-svg": "^1.0.1"
+ "@svgr/webpack": "^6.2.1",
+ "@types/node": "^17.0.25",
+ "@types/react": "^18.0.6",
+ "typescript": "^4.6.3"
  }
 }

examples/svg-components/pages/index.tsx

@@ -0,0 +1,10 @@
+import Cat from '&/svgs/cat.svg'
+import styles from '&/styles/index.module.css'
+
+export default function Home() {
+ return (
+ <div className={styles.container}>
+ <Cat />
+ </div>
+ )
+}

examples/svg-components/styles/index.module.css

@@ -0,0 +1,4 @@
+.container {
+ width: 600px;
+ margin: 100px auto;
+}

examples/svg-components/tsconfig.json

@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "baseUrl": ".",
+ "paths": {
+ "&*": [".*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+}