在Vue中编写SVG图标组件的方法

在考虑了将矢量图标从图标字体迁移到内联 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 被认为是未来的发展方向，因此最好是在保留图标字体的易用性的基础上，逐步放弃使用图标字体。 Svg-icon 组件是一个例子，告诉了我们如何使用可用的库来抽离出

总结

到此这篇关于在 Vue 中编写 SVG 图标组件的文章就介绍到这了,更多相关vue SVG 图标组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！