/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h2: "h2", p: "p", img: "img", a: "a", pre: "pre", code: "code", span: "span", ol: "ol", li: "li", h3: "h3" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { children: "為什麼要用 SVG" }), "\n", _jsx(_components.p, { children: "SVG 是一種圖形格式，是可縮放向量圖形 (Scalable Vector Graphics) 的縮寫。與我們一般常見的點陣圖形（像 JPEG 或 PNG）不同，最大的特色就是不會因為圖片尺寸過小或放大倍數過高而失真，在網站中非常適合用於標誌和圖形（Icon）。" }), "\n", _jsx(_components.p, { children: "向量圖形與點陣圖型在組成上有根本的差異。點陣圖形以像素為基本，是「方塊格」組成的矩形，如果將點陣圖放大，就會看到顆粒狀和像素化的方格。如果點陣圖縮得太小，則會變得模糊不清。相對的，向量圖形檔案則是根據點、線、形狀和顏色所構成的複雜數學算式組成。可以把它理解成就像是用程式「畫」出來的圖案。" }), "\n", _jsx(_components.p, { children: "網站設計師常會在介面上添加標示特定功能的圖形標誌，就是我們熟知的 Icon，例如登入註冊會員、社群媒體等功能按鈕常以 Icon 代替。因為 Icon 大多是尺寸較小的圖像矩形，放上網站為避免失真大多會轉存成 SVG 檔案交給前端工程師。" }), "\n", _jsx(_components.p, { children: "當網站規模大了 Icon 數量變多，用到數十個甚至上百個 SVG 都有可能，而這些很可能只是 hover 時需要顏色變化就多出一個檔案。如果是一般 PNG 檔案那確實需要，但 SVG 本質上就是程式碼組成的，可以透過參數變化，在需要的地方客製化顏色、尺寸大大提高開發彈性。" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/blog/use-svgr-in-nextjs/svgVSpng.png", alt: "svgVSpng" }) }), "\n", _jsx(_components.h2, { children: "在專案中使用 SVGR" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-svgr.com/", children: "@svgr/webpack" }), " 是一個 JavaScript 的套件，可以將 SVG 圖像轉換成 React component。這個套件可以幫助開發者在 React 中方便地使用 SVG 圖像，並且可以輕鬆地進行樣式和事件的設定。像是將 SVG 圖像作為 React 組件導入，並使用 props 來進行修改。"] }), "\n", _jsx(_components.p, { children: "如果是使用 Create React App 指令產生的專案，它已經預先安裝了 @svgr/webpack 套件，因此不需要額外安裝。可以直接在組件中導入 SVG ，就像這樣使用：" }), "\n", _jsx(_components.pre, { className: "language-jsx", children: _jsx(_components.code, { className: "language-jsx code-highlight", children: _jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "ReactComponent" }), " ", _jsx(_components.span, { className: "token keyword module", children: "as" }), " logo ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"./logo.svg\"" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }) }), "\n", _jsx(_components.p, { children: "但是在 Next.js 中我們需要手動進行安裝及配置：" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "在控制台中運行以下命令以安裝 @svgr/webpack：" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "npm install --save-dev @svgr/webpack" }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsxs(_components.li, { children: ["再來配置新的 Webpack 規則，用於處理 SVG，在 ", _jsx(_components.code, { children: "next.config.js" }), " 文件中添加以下設定："] }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token function", children: "webpack" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "config" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "module" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "rules" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsx(_components.span, { className: "token comment", children: "// .svg 結尾的檔案才進行處理" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "test" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: [_jsx(_components.span, { className: "token special-escape escape", children: "\\." }), "svg", _jsx(_components.span, { className: "token anchor function", children: "$" })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsx(_components.span, { className: "token regex-flags", children: "i" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 限制 jsx, tsx 的檔案才能引入 SVG" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "issuer" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: [_jsx(_components.span, { className: "token special-escape escape", children: "\\." }), _jsxs(_components.span, { className: "token char-class", children: [_jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "[" }), "jt", _jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "]" })] }), "sx", _jsx(_components.span, { className: "token quantifier number", children: "?" }), _jsx(_components.span, { className: "token anchor function", children: "$" })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "use" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'@svgr/webpack'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " config\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "現在可以在 TypeScript 中使用和導入 SVG 文件，就像這樣：" }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Icon" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'../public/icons/x.svg'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Home" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "NextPage" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "main"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "className" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text-3xl font-bold underline", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "Hello world!" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), _jsx(_components.span, { className: "token class-name", children: "Icon" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text", children: "\n" })] }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "10", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "11", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Home" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "但是接下來會馬上遇到這個問題，怎麼回事？" }), "\n", _jsx(_components.pre, { className: "language-shell", children: _jsx(_components.code, { className: "language-shell code-highlight", children: _jsxs(_components.span, { className: "code-line line-number", line: "1", children: ["Cannot ", _jsx(_components.span, { className: "token function", children: "find" }), " module ", _jsx(_components.span, { className: "token string", children: "'../public/icons/x.svg'" }), " or its corresponding ", _jsx(_components.span, { className: "token builtin class-name", children: "type" }), " declarations.ts", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "2307" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }) }) }), "\n", _jsxs(_components.p, { children: ["這是因為 TypeScript 無法識別 SVG 文件的類型，具體原因是在 ", _jsx(_components.a, { href: "https://github.com/vercel/next.js/pull/26485", children: "Next.js 11 以後導入了自己的 image type" }), "，把 ", _jsx(_components.code, { children: ".svg" }), " 的檔案設定成了 ", _jsx(_components.code, { children: "any" }), "，可以在 ", _jsx(_components.code, { children: "/node_modules/next/image-types/global.d.ts" }), " 看到這些設定。"] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token keyword", children: "declare" }), " ", _jsx(_components.span, { className: "token keyword", children: "module" }), " ", _jsx(_components.span, { className: "token string", children: "'*.svg'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token comment", children: "/**\n" })] }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: _jsx(_components.span, { className: "token comment", children: " * Use `any` to avoid conflicts with\n" }) }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: _jsx(_components.span, { className: "token comment", children: " * `@svgr/webpack` plugin or\n" }) }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: _jsx(_components.span, { className: "token comment", children: " * `babel-plugin-inline-react-svg` plugin.\n" }) }), _jsxs(_components.span, { className: "code-line line-number", line: "8", children: [_jsx(_components.span, { className: "token comment", children: " */" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " content", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token builtin", children: "any" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " content\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "13", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "14", children: [_jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["要修正這個問題很簡單。在你的專案根目錄下，新增一個名叫 ", _jsx(_components.code, { children: "/types" }), " 的資料夾，並在裡面創建一個 ", _jsx(_components.code, { children: ".d.ts" }), " 檔案，這是 TypeScript 的宣告檔，用來描述 JavaScript 函式庫或是瀏覽器環境的型別。"] }), "\n", _jsxs(_components.p, { children: ["在 ", _jsx(_components.code, { children: ".d.ts" }), " 檔案裡，你可以重寫一些內建型別，比如說，當你需要使用到 GTM 事件時，你可能會用到 ", _jsx(_components.code, { children: "window.dataLayer" }), "。但標準的 ", _jsx(_components.code, { children: "window" }), " 介面並沒有包含 ", _jsx(_components.code, { children: "dataLayer" }), " 屬性，這會導致型別錯誤。我們可以透過在一個名為 ", _jsx(_components.code, { children: "global.d.ts" }), " 的檔案裡，為 ", _jsx(_components.code, { children: "window" }), " 添加 ", _jsx(_components.code, { children: "dataLayer" }), " 屬性的型別宣告，來給 ", _jsx(_components.code, { children: "dataLayer" }), " 提供正確的型別。"] }), "\n", _jsxs(_components.p, { children: ["首先在 ", _jsx(_components.code, { children: "tsconfig.json" }), " 檔案裡，加入 ", _jsx(_components.code, { children: "\"typeRoots\": [\"./types\"]" }), " 這一行設定。這行設定會告訴 TypeScript 在解析型別宣告時，應該要檢視位於 ", _jsx(_components.code, { children: "/types" }), " 資料夾下的 ", _jsx(_components.code, { children: ".d.ts" }), " 檔案。"] }), "\n", _jsxs(_components.p, { children: ["然後建立名為 ", _jsx(_components.code, { children: "/types" }), " 的資料夾，在裡面建立一個名為 ", _jsx(_components.code, { children: "images.d.ts" }), " 的檔案，並把原本在 ", _jsx(_components.code, { children: "/node_modules/next/image-types/global.d.ts" }), " 的內容複製過去。這裡要將 ", _jsx(_components.code, { children: "*.svg" }), " 的宣告替換掉。根據你的專案情況和使用的工具，你可能需要修改相關的型別註釋。以下是一個例子："] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "declare" }), " ", _jsx(_components.span, { className: "token keyword", children: "module" }), " ", _jsx(_components.span, { className: "token string", children: "'*.svg'" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "content" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "props", _jsx(_components.span, { className: "token operator", children: ":" }), " React", _jsx(_components.span, { className: "token punctuation", children: "." }), "SVGProps", _jsx(_components.span, { className: "token operator", children: "<" }), "SVGElement", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ReactElement", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " \n" }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " content", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["因為定義了 ", _jsx(_components.code, { children: "props: React.SVGProps" }), " ，所以你需要任何的 SVG 屬性時直接打一個關鍵字，會自動跳出程式碼提示（Intelligent code completion）告訴你可用的屬性，修改起來更便利。"] }), "\n", _jsxs(_components.p, { children: ["最後，你可能還需要將 ", _jsx(_components.code, { children: "next-env.d.ts" }), " 內的圖片型別定義宣告刪除，才能確保 TypeScript 不會加載並使用它原始的型別定義。", _jsx(_components.code, { children: "next-env.d.ts" }), " 是 Next.js 專案中自動生成的一個 TypeScript 宣告檔案。這個檔案的主要目的是讓 TypeScript 能夠識別 Next.js 提供的型別定義，以及與 Next.js 相關的型別（比如圖片檔案的）。"] }), "\n", _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token comment", children: "/// " }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token comment", children: "/// <= 移除這行" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/blog/use-svgr-in-nextjs/svgIntelliSense.png", alt: "svgIntelliSense" }) }), "\n", _jsx(_components.h2, { children: "集中管理 SVG" }), "\n", _jsxs(_components.p, { children: ["既然 SVG 都變成 component 了，可以通通放到放到一個檔案內再匯出，有需要使用到的地方再匯入就行了。例如新建一個 ", _jsx(_components.code, { children: "/components/icons" }), " 資料夾，在裡面新增一個 ", _jsx(_components.code, { children: "/img" }), " 資料夾把用到的 SVG 放進去，及一個 ", _jsx(_components.code, { children: "index.tsx" }), " 檔案把 SVG 集中匯出："] }), "\n", _jsx(_components.pre, { className: "language-tsx", children: _jsxs(_components.code, { className: "language-tsx code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "LogoSVG" }) }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./img/logo.svg'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "ShoppingCartSVG" }) }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./img/shopping_cart.svg'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [_jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: "\n" }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsxs(_components.span, { className: "token exports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] })] }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: _jsxs(_components.span, { className: "token exports", children: ["\t", _jsx(_components.span, { className: "token maybe-class-name", children: "LogoSVG" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: _jsxs(_components.span, { className: "token exports", children: ["\t", _jsx(_components.span, { className: "token maybe-class-name", children: "ShoppingCartSVG" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }) }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: _jsxs(_components.span, { className: "token exports", children: ["\t", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }) }), _jsxs(_components.span, { className: "code-line line-number", line: "9", children: [_jsx(_components.span, { className: "token exports", children: _jsx(_components.span, { className: "token punctuation", children: "}" }) }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "如此一來要使用這些 SVG 時就能從同一個檔案匯入了。" }), "\n", _jsx(_components.h3, { children: "svgviewer" }), "\n", _jsxs(_components.p, { children: ["搭配這個網站 ", _jsx(_components.a, { href: "https://www.svgviewer.dev/", children: "svgviewer" }), "，它可以用來找一些別人做好的 SVG 應用在專案上，也是一個線上 SVG 檢視器，透過它可以貼上設計師給的 SVG 程式碼來查看效果，針對 SVG 的程式碼進行美化（Prettify）或是最佳化（Optimize），讓檔案容量變得更小，其他還有產生 SVG 檔案分享連結以及轉存成 PNG 的功能。"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/blog/use-svgr-in-nextjs/svgOptimize.png", alt: "svgOptimize" }) }), "\n", _jsxs(_components.p, { children: ["在使用 SVG 時把 ", _jsx(_components.code, { children: "width" }), " 及 ", _jsx(_components.code, { children: "height" }), " 的尺寸屬性拿掉，如果是單一色系的 Icon 甚至會把 ", _jsx(_components.code, { children: "fill" }), " 及 ", _jsx(_components.code, { children: "stroke" }), " 屬性也拿掉，然後丟進 svgivewer 預覽效果，沒問題就 Optimize 後再放回專案使用。"] }), "\n", _jsx(_components.p, { children: "如此一來便可將開發網站上常會用到的 Icon 都製作成可透過程式碼完全控制的組件，例如 \"Add\", \"Remove\", \"Edit\" 等 Icon，可能會因為組件 state 而產生顏色變化時，不需要再匯入一張相同但只是顏色不同的檔案，而是可以透過 props 來變更，達到 SVG 元件庫的效果。" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "/images/blog/use-svgr-in-nextjs/svgProps.png", alt: "svgProps" }) }), "\n", _jsx(_components.p, { children: "最後要注意，如果沒有把 SVG 原始碼的外觀屬性拿掉，即便在做成 component 後也無法透過 props 修改它，因此讓 SVG 保持在最乾淨的狀態，一切的顏色、尺寸都由 component 化來傳值控制，就能達到最大的靈活度是很重要的。不過樣式複雜的 SVG 就建議不要拿掉外觀屬性，以免最後改出來的效果不對了。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

在 Next.js + typescript 專案中使用 SVGR 打造自己的 SVG 元件庫