Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

在 React 中使用 SVG

因為這次的專案並不是使用 create-react-app 的做法,因此不能直接用 import {ReactComponent as Name} from '/path/to/svg';

解決方法 1: file-loader

在 Webpack 中加入 file-loader 的載入器,讓 SVG 作為圖片載入,適用於 <img src="path/to/svg/" /> 的方式。

npm install file-loader --save-dev

接著在 webpack.config.js 中加入針對 .svg 副檔名的載入規則。

module.exports = {
/* ... */
  modules: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images', // 我習慣會把圖片輸出到 images 這個資料夾
            }
          }
        ]
      }
    ]
  }
}

解決方法 2: @svgr/webpack

如果要使用 import {ReactComponent as Name} from '/path/to/svg'; 的方式來載入,則可以直接把 <svg> 的內容插入 HTML 中。

這種做法,適合需要透過 CSS 調整樣式的情境。

npm install @svgr/webpack --save-dev

接著在 webpack.config.js 中加入設定。

module.exports = {
/* ... */
  modules: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              outputPath: 'images', // 我習慣會把圖片輸出到 images 這個資料夾
            }
          }
        ]
      }
    ]
  }
}

參考資料

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料