vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法
更新时间：2023年12月01日 14:46:37 作者：侯秃顶
这篇文章主要介绍了vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
使用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图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要和大家详细介绍一下Vue中computed和watch的使用与区别，文中通过示例为大家进行了详细讲解，对Vue感兴趣的同学，可以学习一下2022-11-11
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库，这篇文章主要介绍了Vue使用Echarts画柱状图2022-12-12
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。本文将在Vue中整合Echarts实现可视化界面，感兴趣的可以了解一下2022-04-04
这篇文章主要介绍了vue单文件组件无法获取$refs的问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了Vue中的scoped及穿透方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在我们的平时的工作中,在前后端交互的时候,为了提高页面的观赏性和用户的体验,我们会在页面上添加loading来阻止用户操作来等待接口的返回,这篇文章主要给大家介绍了关于如何优雅的控制全局loading显示的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了vue+echarts绘制省份地图并添加自定义标注方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Vue3通过ref操作Dom元素及hooks的使用方法,需要的朋友可以参考下2023-01-01
最新评论