天天看点

vue-优雅的使用svg

日前,开发一个配置数据表单类的框架,需要考虑框架的扩展性,以及使用的便捷性,其中图标类如何便捷的引入也在考虑之中。

期望实现的效果是在新增一个svg时,仅将svg文件存放到某一个文件夹下,之后使用时通过类似于<code>&lt;mis-icon icon="name"&gt;</code>这种方式即可使用。

全局注册组件

使用js读取文件夹下的所有svg导入至项目中

在<code>src/compoments</code>下创建<code>MisIcon.vue</code>

在<code>src/assets/svg</code>文件夹下存放所有svg文件

注意:如果需要修改svg的颜色,svg文件中的填充色 <code>fill</code> 必须删除

在<code>src/assets</code> 下创建<code>svg.js</code>文件

根目录下的<code>vue.config.js</code>文件中

<b> ฅ平平庸庸的普通人ฅ </b>