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>