vue3 门户网站搭建5-图标

奈何 element 自带的图标太少，不够用，故打算使用 vite-plugin-svg-icons 组件来封装 svg-icon 。

ps: ui 框架选用的 element-ui，为了能跟 vue3 更好的结合，还得装个 element-plus。

 

首先就是安装：npm install vite-plugin-svg-icons -D

 

main.js 引入图标脚本

 

在vite.config.js中配置

 

新建封装组件：

 

main.js 中全局注册：

 

使用方式：

1、首先需要 vite.config.js 配置的路径下有对应 svg 图片：

 2、引用时，行内样式或者 class 都可以：

 

注：

下载的图标有的不能改色，是因为作者在图标中定义了颜色，在 svg 中 查找 fill='#...' 代码，删除即可！

附：

svg 下载地址：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a