[筆記] React Hooks 起來 – Ch4 – SVG

Posted onAuthorANDY LIEN

章節連結

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記載入 SVG 圖示和如何傳入 props 到 component 中。

react logo

內容

1. 搭配 vite 使用的話，需要額外載入套件 vite-plugin-svgr，並調整 vite.config.js 的設定
2. 需要將 /*.svg 的格式做排除，因為這是 vite 要取得 public folder 內的檔案寫法，會和 vite-plugin-svgr 產生衝突
3. 若使用 TypeScript，要將 /// <reference types=”vite-plugin-svgr/client” /> 加在 vite-env.d.ts 中，這樣才可以避免型別遺失

程式碼

https://github.com/andy922200/practice-20230615/commit/681b43867b5a4c1e9e1514155162a3a12297ca93

參考資料

1. vite-plugin-svgr
2. How to Import SVGs in a React and Vite app
3. TypeScript – Module ‘”*.svg”‘ has no exported member ‘ReactComponent

系列文章

  • [筆記] React Hooks 起來 – Ch7 – 切換畫面元件
  • [筆記] React Hooks 起來 – Ch6 – 建立自己的 Hook
  • [筆記] React Hooks 起來 – Ch6 – useMemo 的使用
  • [筆記] React Hooks 起來 – Ch5 – useState 和 useEffect
  • [筆記] React Hooks 起來 – Ch5 – useCallback 和 TypeScript 注意事項
  • [筆記] React Hooks 起來 – Ch4 – 實作深色主題
  • [筆記] React Hooks 起來 – Ch4 – 增加狀態管理
  • [筆記] React Hooks 起來 – Ch4 – 前導
  • [筆記] React Hooks 起來 – Ch3
  • [筆記] React Hooks 起來 – Ch1 ~ Ch2
    • 按讚加入粉絲團

    延伸閱讀