vue3 svg,使用vue加svg实现流程图代码
在以工具为构建工具的开发环境中我们可以很方便的实现挽救(保存的简写)图标的组件化，下面这篇文章主要给大家介绍了关于Vue3中级指南之如何在轻快地中使用挽救(保存的简写)图标的相关资料，文中通过实例代码介绍的非常详细，需要的朋友可以参考下
目录
前言插件-SVG-图标安装使用如何在组件中使用创建SvgIcon组件核标准情报中心目录结构全局注册组件页面使用获取所有象征的总结
前言
挽救(保存的简写)图片在项目中使用的非常广泛，今天记录一下我是如何在vue3 vite中使用挽救(保存的简写)图标。
vite-plugin-svg-icons
预加载在项目运行时就生成所有图标，只需操作一次数字正射影像图高性能内置缓存，仅当文件被修改时才会重新生成
安装
节点版本：=12.0.0 vite版本：=2.0.0
纱线添加邀请-插件-SVG-图标-D
#或者
新公共管理我邀请-插件-SVG-图标-D
#或者
安装插件-SVG-图标-D
使用
vite.config.ts中的配置插件从"插件-SVG-图标"导入{ createSvgIconsPlugin }
从"路径"导入路径
导出默认值()={
返回{
插件：[
createSvgIconsPlugin({
//指定需要缓存的图标文件夹
图标目录：[路径。解决(流程。CWD()， src/icons)]，
//指定象征的格式
symboled:图标-[目录]-[名称，
/**
* 自定义插入位置
* @默认值：正文-最后
*/
//注入？正文最后 正文第一
/**
*自定义dom id
* @default: __svg__icons__dom__
*/
//自定义domid:"_ _ SVG _ _ icons _ _ DOM _ _ "，
}),
],
}
}
在src/main。j内引入注册脚本导入"虚拟：SVG-图标-注册"
如何在组件中使用
创建SvgIcon组件
/src/components/SvgIcon/index。某视频剪辑软件
模板
SVG aria-hidden= true class= SVG-icon :width= props。 size :height= props。尺寸
use:xlink:href= symbolId rel= external no follow :fill= props。颜色/
/svg
/模板
脚本设置
从“vue”导入{ computed }
const props=defineProps({
前缀：{
类型：字符串，
默认："图标"
},
名称：{
类型：字符串，
必填：真
},
颜色：{
类型：字符串，
默认： #333
},
大小：{
类型：字符串，
默认值：" 1em "
}
})
const symbolId=computed(()=`# $ { props。前缀}-$ { props。name } `)
/脚本
icons目录结构
# src/icons
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg
全局注册组件
# src/main.js
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入路由器。/路由器
从“元素加”导入ElementPlus
导入 element-plus/dist/index.css
从" @/components/SvgIcon/index.vue "导入svgIcon
导入"虚拟：SVG-图标-注册"
创建应用程序。使用(ElementPlus)。使用（路由器)。组件( svg-icon ，svgIcon)。挂载(#应用程序)
页面使用
模板
SVG图标v-if= props。 icon :name= props。图标/
道具。title slot= title { props。title } }/span
/模板
脚本设置
const props=defineProps({
图标：{
类型：字符串，
默认值：""
},
标题：{
类型：字符串，
默认值：""
}
})
/脚本
获取所有 SymbolId
从"虚拟：SVG-图标-名称"导入编号
//=[icon-icon1 ， icon-icon2 ， icon-icon3]
总结
到此这篇关于Vue3中级指南之如何在轻快地中使用挽救(保存的简写)图标的文章就介绍到这了，更多相关轻快地使用挽救(保存的简写)图标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。