在 Next 13 (App Router)直接 import Inline SVG，且仍保有最新的 SWC Compiler

發表於 2023-09-02 分類於程式語言，前端 Disqus：

import inline SVG in Next 13 with SWC Compiler. make your code much more cleaner!

前言

在 React 使用 SVG，若想要單純像組件一樣直接 import 使用，而不是每次都透過 Image 包裝一層
就是透過 @svgr/webpack 了

但就會發現要捨棄 Next 最新的 SWC Compiler，只能透過 babel 來編譯
大幅降低編譯速度

現在 SWC 終於支援啦！

用法

import MySVGIcon from '@/components/my-svg-icon.svg';

const ReactWithInlineSvg = () => {
    <MySVGIcon />
}

作法

打開next.config.js，增加 webpack 參數

webpack: (config, options) => {
  config.module.rules.push({
    test: /\.svg$/,
    use: [
      options.defaultLoaders.babel,
      {
        loader: '@svgr/webpack',
        options: { babel: false },
      },
    ],
  });
  return config;
},

缺點

可以直接 import 使用 SVG，讓 Code 乾淨許多

但也是有缺點：
不能動態調整 class 或寬、高

畢竟是直接將整個 SVG 帶進來，沒有入參調整
也就是你的 SVG 原始碼要直接符合需求。就算外面包一層 div 也沒效果 QQ

參考資料

An SWC enabled solution for Inline SVGs