使用svgr在Vite+React+Typescript專案中引入SVG圖檔

因為有遇到不同版本的問題解了一陣子，想說來筆記一下。

步驟一：安裝套件

vite-plugin-svgr

步驟二：改tsconfig.json

到compilerOptions去新增types

"compilerOptions": 
{
    [...rest...]
    "types": ["vite-plugin-svgr/client"] <---新增這個
},

步驟三：改vite.config.ts

到plugins新增svgr()

import svgr from "vite-plugin-svgr";  <---最上方引入

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],  <---新增這個
});

步驟四：在component中引入使用

這裡就是筆者踩雷的地方了！

如果svgr是4.0.0以上的版本，引入時的語法為：

import Logo from './logo.svg?react'

如果是2.4.0的版本

import { ReactComponent as MySuperCustomIconComponent } from "../assets/logo.svg";

在使用的地方寫法如下，筆者有把svgr降版為2.4.0

import { ReactComponent as MySuperCustomIconComponent } from "../assets/logo.svg";

const Header = () =>{

...

  return (
      <HeaderRightMobile>
        <MySuperCustomIconComponent fill='red' />
      </HeaderRightMobile>
    ) 
  }
}

export default Header;

如果顏色沒有改到，記得去查找svg檔案本人，要把裡面的fill跟stroke都刪掉。

參考資料

Importing SVG files as React components with Vite

Importing SVG files as React components with Vite

Type definition for vite-plugin-svgr?

Type definition for vite-plugin-svgr?