vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法

更新时间：2023年12月01日 14:46:37 作者：侯秃顶

这篇文章主要介绍了vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

1.安装vite-plugin-svg-icons插件

npm i fast-glob@3.x -D
npm i vite-plugin-svg-icons@2.x -D

2.使用vite-plugin-svg-icons插件

2.1 在项目根目录查找vite.config.js,进行配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir);
}
export default {
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'public/img/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[name]',
    }),
  ],
 }

2.2 vite-plugin-svg-icons插件引入在main.js中

import 'virtual:svg-icons-register'

2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致

项目中使用示例:
//menu.icon是路径里面的svg图片名称

<svg aria-hidden="true" style="width: 14px; height: 14px">
	<use :href="`#icon-${menu.icon}`" rel="external nofollow"  />
</svg>

到此这篇关于vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法的文章就介绍到这了,更多相关vite-plugin-svg-icons插件显示svg图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3 重构函数透传示例解析
这篇文章主要为大家介绍了Vue3 重构函数透传示例解析
2023-02-02
关于vue表单提交防双/多击的例子
今天小编就为大家分享一篇关于vue表单提交防双/多击的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue.js中实现登录控制的方法示例
这篇文章主要介绍了vue.js中实现登录控制的方法,结合实例形式分析 vue.js操作登陆页面流程控制相关实现技巧,需要的朋友可以参考下
2018-04-04
vue 集成 vis-network 实现网络拓扑图的方法
这篇文章主要介绍了vue 集成 vis-network 实现网络拓扑图的方法，本文通过实例代码给大家介绍的非常详细 ,需要的朋友可以参考下
2019-08-08
浅谈vue中使用编辑器vue-quill-editor踩过的坑
这篇文章主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue axios库发送请求的示例介绍
axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包装器，可以像插件一样安装使用:Vue.use(VueAxios, axios)，本文给大家介绍Vue axios和vue-axios关系，感兴趣的朋友一起看看吧
2022-08-08
vue3触发父组件两种写法
这篇文章主要介绍了vue3触发父组件两种写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
详解vue中localStorage的使用方法
这篇文章主要介绍了详解vue中localStorage的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
结合mint-ui移动端下拉加载实践方法总结
下面小编就为大家带来一篇结合mint-ui移动端下拉加载实践方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue简单练习桌面时钟的实现代码实例
这篇文章主要介绍了vue简单练习桌面时钟的实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值的相关资料,需要的朋友可以参考下
2019-09-09