vue element admin 使用svg图标 电脑版发表于:2020/6/7 12:58 vue-element-admin基础模板中,已经封装好了使用svg图标的组件,所在路径为:src/icons/svg(有些模板是在src/svg下面,看情况找到对应存放的文件夹就行),在其中我们可以找到相关的代码,所有在文件夹中的svg图片注册到全局中,可以在项目中任意地方使用。所以图标均可在 @/icons/svg。可自行添加或者删除图标,所以图标都会被自动导入,无需手动操作。 ![](https://img.tnblog.net/arcimg/aojiancc2/ba5ac2625798444b8e42872318dc700c.png) 使用的时候直接使用svg-icon组件加样式名就行了,样式名就是那个图标名,代码如下: ``` <svg-icon icon-class="bell1" /> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> ``` 需要什么图标在vue-element-admin基础模板中没有的情况下,可以去阿里巴巴图标库去下载svg图标。svg图标还可以在阿里巴巴图标库复制svg代码后创建一个.svg后缀的文件把复制的svg代码粘贴进去使用