vue项⽬中svg-icon图标使⽤- 项⽬结构
引⽤步骤
1，在components⽂件夹下新建SvgIcon组件
SvgIcon下创建index.vue
index.vue内容如下
<template>
<svg :class="svgClass"aria-hidden="true"v-on="$listeners"> <use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default{
name:'SvgIcon',
props:{
iconClass:{
type: String,
required:true
},
className:{
type: String,
default:''
}
},
computed:{
iconName(){svg图
return`#icon-${this.iconClass}`
},
svgClass(){
if(this.className){
return'svg-icon '+this.className
}else{
return'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
2，创建svg-Icon图标⽂件夹icons，与components同级
svg中存放icon图⽚ .svg
index.js内容如下：
import Vue from'vue'
import SvgIcon from'@/components/SvgIcon'// svg component
// register globally
Vueponent('svg-icon', SvgIcon)
const req = t('./svg',false,/\.svg$/)
const requireAll= requireContext => requireContext.keys().map(requireContext) requireAll(req)
# replace default config
# multipass:true
# full:true
plugins:
# - name
#
# or:
# - name:false
# - name:true
#
# or:
# - name:
#    param1:1
#    param2:2
- removeAttrs:
attrs:
-'fill'
-'fill-rule'
3，main.js修改引⼊icons⽂件
4，f.js修改
{
test:/\.svg$/,
loader:'svg-sprite-loader',
include:[resolve('src/icons')],
options:{
symbolId:'icon-[name]'
}
},
在原来的test: /.(png|jpe?g|gif|svg)(?.*)?$/规则下加⼊排除规则exclude:[resolve('src/icons')],
5，安装svg-sprite-loader
npm install svg-sprite-loader
6，使⽤
<el-form-item label="⽤户名"prop="username"class="item">
<el-input v-model.number="ruleForm.username">
<svg-icon slot="prefix"icon-class="user"class="el-input__icon input-icon"/>
</el-input>
</el-form-item>
<el-form-item label="密码"prop="password"class="item">
<el-input type="password"v-model="ruleForm.password"autocomplete="off">
<svg-icon slot="prefix"icon-class="password"class="el-input__icon input-icon"/> </el-input>
</el-form-item>
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。