vue引入svg图片,vue引用svg矢量图
这篇文章主要给大家介绍了关于某视频剪辑软件中引入挽救(保存的简写)图标的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
某视频剪辑软件中引入挽救(保存的简写)图标的方式
Vue中引入svg图标的方式一
安装
纱线添加SVG-sprite加载程序-开发
挽救(保存的简写)组件
索引。某视频剪辑软件
！- svg组件-
模板
SVG class= SVG-icon :class= SVG class aria-hidden= true
使用：xlink:href=iconName /
/svg
/模板
脚本
导出默认值{
名称： SvgIcon ，
道具：{
//svg的名称
svgName: {
类型：字符串，
必填：真
}
},
计算值：{
iconName () {
返回` #icon-${this.svgName} `的值
},
svgClass () {
if (this.svgName) {
返回svg-icon this.svgName
}否则{
返回" svg图标"
}
}
}
}
/脚本
style lang=less 范围。SVG-图标{
宽度：100像素
高度：100像素
垂直对齐：-0.15 em；
填充：当前颜色
溢出：隐藏；
}
/风格
注册到全局
索引。射流研究…
从“vue”导入某视频剪辑软件
从" @/组件/SvgIcon "导入SvgIcon
//注册到全局
Vue.component(svg-icon ，SvgIcon)
const require all=要求上下文=要求上下文。keys().映射（要求上下文)
const req=require.context( ./svg ，false，/\ .svg$/)
要求全部（请求)
vue。配置。射流研究…
模块。导出={
chainWebpack: config={
配置模块。规则( svg )。exclude.add(解析( src/资产/图标))。结束()
配置模块。规则("图标")。测试(/\。svg$/)。包含.添加(解析( src/资产/图标))。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
符号：“图标-[名称]”
})。结束()
}
}
页面中使用
！-SVG-名称为挽救(保存的简写)名-
SVG-icon SVG-name= IC _ home _ news /
Vue中引入svg图标的方式二
安装SVG-精灵-加载程序-保存-开发
vue。配置。射流研究…中添加如下代码
const path=require( path )；
函数解析（目录){
//_ _目录名项目根目录的绝对路径
返回path.join(__dirname，dir)；
}
模块。导出={
chainWebpack: config={
const SVG规则=配置。模块。规则( SVG )；
//清除已有的所有装货设备
//如果你不这样做，接下来的装货设备会附加在该规则现有的装货设备之后
SVG规则。用途。clear()；
svgRule。测试(/\。svg$/)。包括。添加(路径。resolve(_ _ dirname， ./src/icons/svg ))。结束()。使用( svg-sprite-loader )。加载程序(“svg-sprite-loader”)。选项({
符号：“图标-[名称]”
});
const文件规则=配置。模块。规则(“文件”)；
文件规则。用途。clear()；
文件规则。测试(/\。svg$/)。排除。添加(路径。resolve(_ _ dirname， ./src/icons/svg ))。结束()。使用("文件加载器")。加载程序("文件加载程序");
},
}
建立如下的文件目录
SvgIcon.vue代码
模板
SVG:class= SVG class xmlns= http://。w3。 org/2000/SVG
使用：xlink:href= icon name xmlns:xlink= http://www。w3。org/1999/xlink /
/svg
/模板
脚本
导出默认值{
名称： SvgIcon ，
道具：{
iconClass: {
类型：字符串，
必填：真
},
类名：{
类型：字符串，
默认值：""
}
},
计算值：{
iconName() {
返回` # icon-$ { this。图标类} `；
},
svgClass() {
if (this.className) {
返回“SVG-icon”这个。类名；
}否则{
返回”SVG图标”；
}
}
}
};
/脚本
样式范围。SVG-图标{
宽度：1em
身高：1em
垂直对齐：-0.15 em；
填充：当前颜色
溢出：隐藏；
}
/风格
挽救(保存的简写)文件夹下放挽救(保存的简写)图标
索引。射流研究…代码
从“Vue”导入Vue
从" @/组件/SvgIcon "导入SvgIcon//svg组件
//全局注册
Vue.component(svg-icon ，SvgIcon)；
const req=require.context( ./svg ，false，/\ .SVG $/)；
const require all=要求上下文=要求上下文。keys().地图(需要上下文)；
要求全部(req)；
最后在主页。射流研究…中引入
"导入"。/icons ；
在页面中使用挽救(保存的简写)
图标级是挽救(保存的简写)图标名类别名称是你要自定义的班级类名
SVG-icon icon-class= features _ IC _ risk @ 1x class-name= icon /SVG-icon
总结
关于将svg图标引入Vue的两种方法的文章到此结束。有关将svg图标引入Vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。