Vue-svg-loader 簡介及使用指南

一、什麼是 Vue-svg-loader

Vue-svg-loader 是一個通過 webpack 載入和解析 SVG 文件，並將其轉換為 Vue 組件的 loader。它可以在項目中更方便地使用 SVG 圖標、動態修改 SVG 圖標顏色、以及處理網路請求錯誤等情況。

二、Vue-svg-loader 的引入

在 webpack 配置文件中，通過使用 vue-svg-loader 插件來引入該工具：

module: {
    rules: [
        {
            test: /\.vue$/,
            use: 'vue-loader'
        },
        {
            test: /\.svg$/,
            use: [
                {
                    loader: 'vue-svg-loader',
                }
            ]
        }
    ]
}

配置完成後就可以在 vue 單文件組件（*.vue）和 HTML 文件中使用 SVG 了。

三、SVG 圖標文件的使用

1、在 vue 單文件組件中使用

在單文件組件中直接 import SVG 文件作為組件使用：

<template>
    <div>
        <MyIcon class="icon" />
    </div>
</template>

<script>
    import MyIcon from '../assets/icon.svg';

    export default {
        components: {
            MyIcon
        }
    }
</script>

2、在 HTML 文件中使用

在 HTML 文件中使用 <img> 標籤將 SVG 文件引入，然後通過 CSS 樣式來控制顏色、大小等屬性：

<img src="assets/icon.svg" class="icon" style="color: red; width: 20px; height: 20px;">

四、Vue-svg-loader 的圖標顏色處理

一個常見的需求是更改 SVG 圖標的顏色。在 Vue-svg-loader 中，可以通過使用 fill="#000000" 來為 SVG 圖標添加對應的顏色。這裡的 #000000 即為十六進位的顏色值。

當然，如果我們希望更改圖標顏色時不需要手動修改 SVG 文件，可以使用 Vue-svg-loader 通過 props 動態修改。

<template>
    <div>
        <MyIcon class="icon" :style="{ fill: iconColor }" />
    </div>
</template>

<script>
    import MyIcon from '../assets/icon.svg';

    export default {
        components: {
            MyIcon
        },
        data() {
            return {
                iconColor: '#000000'
            }
        }
    }
</script>

五、Vue-svg-loader 的錯誤處理

當 SVG 文件路徑錯誤或文件不存在時，會導致編譯報錯。為了解決這個問題，Vue-svg-loader 提供了解析器，可以返回空 SVG 組件並顯示警告消息。

即在 webpack 配置文件中添加如下配置：

module: {
    rules: [
        {
            test: /\.svg$/,
            use: [
                {
                    loader: 'vue-svg-loader',
                    options: {
                        svgo: {
                            plugins: [
                                { removeTitle: false },
                                { convertPathData: false }
                            ]
                        }
                    }
                }
            ]
        }
    ]
}

添加配置後，當 SVG 文件不存在或路徑錯誤時，會產生以下效果：

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" height="1em" width="1em"
       aria-hidden="true" focusable="false">
    <path d="M0 0h0v0h0z" fill="none"/>
  </svg>
  <!-- WARNING: The SVG asset "/assets/logo.svg" is missing. -->
</div>