使用vue加svg实现流程图代码,vue svg-icon
本文给大家介绍了在某视频剪辑软件项目中使用挽救(保存的简写)图标的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
挽救(保存的简写)图标优点挽救(保存的简写)与图标字体之类的字体图标在网页中的使用差别不大，可以修改大小，颜色等而且不失真。
安装svg-sprite-loadernpm安装-保存-开发
文件夹目录(xxx.svg注意：这里的xxx不要使用中文)-资产
-图标
- svg
- index.js
配置依赖//Vue2.x在webpack.base.conf.js中配置如下：
//注意挽救(保存的简写)图标的路径src/资产/图标要写正确
模块：{
规则：[
{
测试：/\。svg$/，
加载程序：" svg-sprite-loader "，
包括：[resolve(src/assets/icon)]，
选项：{
符号：“图标-[名称]”
}
},
{
测试：/\。(pngjpe？ggifsvg)(\？*)?$/,
加载程序："网址加载程序",
排除：[resolve(src/assets/icon)]，
选项：{
限额：10000,
名称：utils . assets path( img/[name]).[哈希：7】。[分机])
}
}
]
}
//Vue3.x在根目录新建vue。配置。射流研究…中配置如下：
模块。导出={
chainWebpack: config={
const SVG规则=配置。模块。规则( SVG )
svgRule.uses.clear()
SVG规则。排除。添加(/node _ modules/)
svgRule。测试(/\。svg$/)。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
符号：“图标-[名称]”，
})
//修改图像加载器添加挽救(保存的简写)处理
常量图像规则=配置。模块。规则(“图像”)
图像规则。排除。添加(解析( src/资产/图标))
配置模块。规则("图像")。测试(/\。(pngjpe？ggifsvg)(\？*)?$/)
}
}
//Vue4.x在根目录新建vue。配置。射流研究…中配置如下：
const path=require(path )
模块。导出={
//使用svg-sprite-loader编译svg，若使用文件加载器时排除src/icon下的挽救(保存的简写)矢量图标
chainWebpack: (config)={
const SVG规则=配置。模块。规则( SVG )
//清除已有的所有装货设备否则接下来的装货设备会附加在该规则现有的装货设备之后
svgRule.uses.clear()
svgRule。测试(/\。svg$/)。包括。添加(路径。resolve(_ _ dirname， ./src/icon ))。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
符号：“图标-[名称]”，
})
const文件规则=配置。模块。规则(“文件”)
fileRule.uses.clear()
文件规则。测试(/\。svg$/)。排除。添加(路径。resolve(_ _ dirname， ./src/icon ))。结束()。使用("文件加载器")。加载器("文件加载器")
},
}
在成分目录下增加一个SvgIcon组件模板
差异
v-if=isExternal
:style=styleExternalIcon
class= SVG-external-icon SVG-icon
v-on=$listeners
/
SVG v-else:class= SVG class aria-hidden= true v-on= $ listeners
使用：xlink:href= icon name rel= external no follow /
/svg
/模板
脚本
//检查是否是外部链接
定义变量外部函数（路径){
返回/^(https？mailto:tel:)/.测试（路径)
}
导出默认值{
名称： SvgIcon ，
道具：{
iconClass: {
类型：字符串，
必填：真，
},
类名：{
类型：字符串，
默认值： ,
},
},
计算值：{
isExternal() {
返回isExternal(this.iconClass)
},
iconName() {
返回` # icon-$ { this . icon class } ` 0的值
},
svgClass() {
if (this.className) {
返回svg-icon this.className
}否则{
返回" svg图标"
}
},
styleExternalIcon() {
返回{
掩码：` URL($ { this。图标类})否-重复50% 50% `,
-WebKit-mask :` URL($ { this。icon class })否-重复50% 50% `，
}
}
}
}
/脚本
样式范围。SVG-图标{
宽度：1em
身高：1em
垂直对齐：-0.15 em；
填充：currentColor
溢出：隐藏；
}。SVG-外部-图标{
背景色：currentColor
面具-尺寸：覆盖！重要；
显示：内嵌-块；
}
/风格
导入图标文件夹下index.js中的所有svg文件，并从“vue”向全局导入Vue注册SvgIcon
从“@/components/SvgIcon”导入SvgIcon
//全局注册
Vue.component(svg-icon ，SvgIcon)
const req=require.context(。/svg ，false，/\。svg$/)
const require all=require context=require context . keys()。映射(要求上下文)
要求全部(请求)
将svg配置导入 @/assets/icon 引入main.js文件。
用！-其中icon-class对应于图标svg文件的名称；类名对应于图标的css样式属性
SVG-icon icon-arrow class name= left-arrow /SVG-icon
注意如果svg图标不能根据样式改变其颜色，请打开svg文件并删除样式标签中的每个填充样式设置。但是如果svg文件中不使用路径，那就没办法了。比如一些网上的工具可以把图片转换成svg格式，转换后的svg文件中的地址是base64，不能改变样式，缩放会失真。
这就是这篇关于如何教你如何在vue项目中使用svg图标的文章。有关使用svg图标的vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。