在考虑了将矢量图标从图标字体迁移到内联 SVG 的原因之后，我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案，同时仍能保持使用图标字体的灵活性和易用性——能够使用 CSS 轻松改变图标的大小、颜色以及其它属性。
一种流行的方法是使用 v-html 指令和 npm 模块 html-loader 来将 SVG 导入到我们的 Vue 模板中，并在 Vue 的生命周期函数 mounted() 中修改渲染的
创建 Svg-icon 组件
让我们创建 Svg-icon.vue 组件文件，并在里面接收三个 prop 变量。
icon 是一个字符串类型的 prop 变量用来传递 .svg 文件名的导入
hasFill 是一个布尔类型的 prop 变量来告诉组件 fill 属性是否用于更改
growByHeight 是一个布尔类型的 prop 变量来决定 height 或 width 是否相对于 font-size 进行缩放，默认值为 true 即使用 height
复制代码我们将 .svg 图标文件通过 require() 传递给 html-loader 方法，该方法会将文件字符串化，并且通过 v-html 指令将其渲染为
所有对
将由 growByHeight 定义的
为了设置
还可以向元素中添加例如 class 等其它 DOM 属性，这些属性可用于设置组件中的范围样式
创建微笑图标
让我们使用 Font Awesome 和我们的 Svg-icon 组件中的图标字体创建一个微笑图标。
使用图标字体
复制代码.smile-icon 类的 CSS 选择器以及伪类选择器 :hover 来设置图标的 font-size 和 color 属性。
使用 Svg-icon 组件
复制代码上面的实现和图标字体方法相同，除了 .smile-icon 类在父元素中，在 Svg-icon 组件中，color 属性被替换为 fill。我们还必须确保 smile-solid.svg 文件位于 Svg-icon 组件的 require() 方法指定的路径（./assets/svg/）中。
渲染成 HTML
这是由 v-html 的输出渲染的 HTML。注意：会删除掉所有的 fill 属性，并将 height 和 width 属性添加到
由于 SVG 被认为是未来的发展方向，因此最好是在保留图标字体的易用性的基础上，逐步放弃使用图标字体。Svg-icon 组件是一个例子，告诉了我们如何使用可用的库来抽离出
