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 這個資料夾
}
}
]
}
]
}
}參考資料
