From 9ceccbcf82fc514fa077ef13b14242011a82f41b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rubens=20Arm=C3=B4a=20Lopes?= Date: Sun, 22 May 2022 17:01:16 -0400 Subject: [PATCH] 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/.babelrc | 4 ---- examples/svg-components/.gitignore | 2 ++ examples/svg-components/README.md | 4 ++-- examples/svg-components/next-env.d.ts | 5 ++++ examples/svg-components/next.config.js | 13 ++++++++++ examples/svg-components/package.json | 5 +++- examples/svg-components/pages/index.js | 16 ------------- examples/svg-components/pages/index.tsx | 10 ++++++++ .../svg-components/styles/index.module.css | 4 ++++ examples/svg-components/tsconfig.json | 24 +++++++++++++++++++ 10 files changed, 64 insertions(+), 23 deletions(-) delete mode 100644 examples/svg-components/.babelrc create mode 100644 examples/svg-components/next-env.d.ts create mode 100644 examples/svg-components/next.config.js delete mode 100644 examples/svg-components/pages/index.js create mode 100644 examples/svg-components/pages/index.tsx create mode 100644 examples/svg-components/styles/index.module.css create mode 100644 examples/svg-components/tsconfig.json diff --git a/examples/svg-components/.babelrc b/examples/svg-components/.babelrc deleted file mode 100644 index a6f4434e2b740..0000000000000 --- a/examples/svg-components/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": ["inline-react-svg"] -} diff --git a/examples/svg-components/.gitignore b/examples/svg-components/.gitignore index 1437c53f70bc2..e7a4fa4d6082c 100644 --- a/examples/svg-components/.gitignore +++ b/examples/svg-components/.gitignore @@ -32,3 +32,5 @@ yarn-error.log* # vercel .vercel + +pnpm-lock.yaml diff --git a/examples/svg-components/README.md b/examples/svg-components/README.md index e19c0ea5bed47..25bb0d287d5a5 100644 --- a/examples/svg-components/README.md +++ b/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 diff --git a/examples/svg-components/next-env.d.ts b/examples/svg-components/next-env.d.ts new file mode 100644 index 0000000000000..4f11a03dc6cc3 --- /dev/null +++ b/examples/svg-components/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/svg-components/next.config.js b/examples/svg-components/next.config.js new file mode 100644 index 0000000000000..10c102e8f9410 --- /dev/null +++ b/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 + }, +} diff --git a/examples/svg-components/package.json b/examples/svg-components/package.json index 86d5cd101beaf..9098c697fcb08 100644 --- a/examples/svg-components/package.json +++ b/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" } } diff --git a/examples/svg-components/pages/index.js b/examples/svg-components/pages/index.js deleted file mode 100644 index b17a90a7085e7..0000000000000 --- a/examples/svg-components/pages/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import Cat from '../svgs/cat.svg' - -export default function Home() { - return ( -
- SVG Cat! - - -
- ) -} diff --git a/examples/svg-components/pages/index.tsx b/examples/svg-components/pages/index.tsx new file mode 100644 index 0000000000000..85a9ddfe2d3fe --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/examples/svg-components/styles/index.module.css b/examples/svg-components/styles/index.module.css new file mode 100644 index 0000000000000..c9cb374921f78 --- /dev/null +++ b/examples/svg-components/styles/index.module.css @@ -0,0 +1,4 @@ +.container { + width: 600px; + margin: 100px auto; +} diff --git a/examples/svg-components/tsconfig.json b/examples/svg-components/tsconfig.json new file mode 100644 index 0000000000000..0362d9a858cd7 --- /dev/null +++ b/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"] +}