如何在 Vue 中创建自定义 SVG 图标组件？

本文共计1626个文字，预计阅读时间需要7分钟。

在思考了如何将矢量图标志从图像字体迁移到SVG后，我在Vue.js中找到了一个用SVG替换图像字体的解决方案。该方法同时保持了图像字体的生动性和易用性——只需使用CSS。

在考虑了将矢量图标从图标字体迁移到内联 SVG 的 原因 之后，我在 Vue.js 中找到了一个用 SVG 替换图标字体的解决方案，同时仍能保持使用图标字体的灵活性和易用性——能够使用 CSS 轻松改变图标的大小、颜色以及其它属性。

一种流行的方法是使用 v-html 指令和 npm 模块 html-loader 来将 SVG 导入到我们的 Vue 模板中，并在 Vue 的生命周期函数 mounted() 中修改渲染的 <svg> 元素。CSS 样式可以直接应用到 <svg> 元素或者是其父元素上，并且这些能够组成一个可复用的组件。

创建 Svg-icon 组件

让我们创建 Svg-icon.vue 组件文件，并在里面接收三个 prop 变量。