好资源导航 » 文章资讯 » 在 Vue 中编写 SVG 图标组件的方法

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

2023-07-31 18:18:04 64

在考虑了将矢量图标从图标字体迁移到内联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-container{
display:inline-flex;
}
.svg-class{
vertical-align:middle;
}

我们将.svg图标文件通过require()传递给html-loader方法，该方法会将文件字符串化，并且通过v-html指令将其渲染为

所有对

将由growByHeight定义的
为了设置
还可以向元素中添加例如class等其它DOM属性，这些属性可用于设置组件中的范围样式

创建微笑图标

让我们使用FontAwesome和我们的Svg-icon组件中的图标字体创建一个微笑图标。

使用图标字体




.smile-icon{
font-size:24px;
color:#aaa;

&:hover{
color:#666;
}
}

.smile-icon类的CSS选择器以及伪类选择器:hover来设置图标的font-size和color属性。

使用Svg-icon组件






.smile-icon{
font-size:24px;
fill:#aaa;

&:hover{
fill:#666;
}
}

上面的实现和图标字体方法相同，除了.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图标组件的文章就介绍到这了,更多相关vueSVG图标组件内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐