vue2使用vite,vue vite
挽救(保存的简写)指可伸缩矢量图形，用来定义用于网络的基于矢量的图形，下面这篇文章主要给大家介绍了关于如何在vue3 vite项目中使用挽救(保存的简写)的相关资料，需要的朋友可以参考下
今天在vue3 vite项目练习中，在使用挽救(保存的简写)时，发现之前的写法不能用，之前的使用方法参考vue2中优雅的使用挽救(保存的简写)
const req=require.context( ./icons/svg ，false，/\ .svg$/)
const require all=要求内容=要求内容。keys().地图（要求内容)
要求全部（请求)
然后就各种资料查找，终于实现了，废话不多说，直接上代码：
步骤1:文件目录
步骤2:安装svg-sprite-loader
新公共管理安装svg-sprite-loader -D
#通过纱线
纱线添加svg-sprite-loader -D
步骤3:创建svgIcon.vue文件
模板
SVG:class= SVG class v-bind= $ attrs :style= { color:color }
使用：xlink:href= icon name rel= external no follow /
/svg
/模板
脚本设置
从“vue”导入{ defineProps，computed }。
const props=defineProps({
名称：{
类型：字符串，
必填：真
},
颜色：{
类型：字符串，
默认值：""
}
})
const icon name=computed(()=` # icon-$ { props。name } `)；
const svgClass=computed(()={
console.log(props.name， props。姓名’)；
if (props.name) {
return ` SVG-icon icon-$ { props。名称} ` 1
}
返回" svg图标"
});
/脚本
样式lang=scss 。SVG-图标{
宽度：1em
身高：1em
填充：当前颜色
垂直对齐：居中；
}
/风格
步骤4:创建核标准情报中心文件夹，存放挽救(保存的简写)文件
步骤5:在主页。射流研究…里面全局注入挽救（saving的简写）图标组件
从“vue”导入{ createApp }
从导入应用程序 App.vue
从导入svgIcon ./components/svgIcon.vue
createApp(应用程序)。组件( svg-icon ，svgIcon).挂载( # app )；
步骤6:在插件文件夹创建svgBuilder.js(重点来了)，ts版本参考：https://github。com/JetBrains/SVG-sprite-loader/issues/434
从" fs "导入{读取文件同步，读取目录同步}
设idPerfix=
const svgTitle=/svg([^ ].*?)/
常数净高宽度=/(widthheight)=([^】。*？)/g
const has view box=/(viewbox=[^】。*?)/克
const clearReturn=/(\r)(\n)/g
函数查找文件（目录){
const svgRes=[]
const dirents=readdirSync(dir，{
withFileTypes: true
})
对于(const董事董事){
if (dirent.isDirectory()) {
svgRes.push(.findSvgFile(dir dirent.name /))
}否则{
const SVG=读取文件同步(dir dirent。姓名)。toString()。replace(clearReturn，)。替换(svgTitle，($1，$2)={
//console.log( i)
//console.log(dirent.name)
让宽度=0
让高度=0
let content=$2.replace(
净空高度宽度，
(s1，s2，s3)={
if (s2===width) {
宽度=s3
} else if (s2===height) {
高度=s3
}
返回""
}
)
如果(!hasViewBox.test($2)) {
content=` view box= 0 0 $ { width } $ { height } ` 0
}
return ` symbol id= $ { idPerfix }-$ { dirent。姓名。替换(。svg ，
)}"$ { content } "
})。替换(/svg ，/symbol )
推送(svg)
}
}
返回svgRes
}
export const svgBuilder=(path，perfix=icon)={
if(路径=== )返回
idPerfix=perfix
const res=findSvgFile(路径)
//console.log(分辨率长度)
//const res=[]
返回{
名称：“svg-transform”，
transformIndexHtml(html) {
返回html.replace(
正文，
`
身体
SVG xmlns= http://www。w3。org/2000/SVG xmlns:xlink= http://www。w3。org/1999/xlink style= position:absolute；宽度：0;高度：0
${res.join()}
/svg
`
)
}
}
}
步骤7:最后在vite.config.js修改配置
从""导入{ svgBuilder } ./src/plugins/SVG builder ；
导出默认定义配置({
插件：[svg构建器(。/src/icons/svg/)]//这里已经导入了src/icons/svg/下的所有SVG，所以不需要单独导入。
})
总结
关于如何在vue3 vite项目中使用svg的这篇文章到此结束。有关使用svg的vue3 vite的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。