vue中使用svg

• 好处
• 基本配置
• • 安装依赖
  • 配置
• 使用

好处

矢量性（无论图片放多大，都不会出现锯齿状模糊）

基本配置

安装依赖

npm install svg-sprite-loader --save-dev

配置

1.在vue.config.vue文件中

    const path = require('path') //必须引入const resolve = dir => path.join(__dirname, dir)//必须引入module.exports = {//配置代理devServer: {},// 配置svgchainWebpack: config => {config.module.rule('svg').exclude.add(resolve('src/icons')) //放置svg的路径.end();config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')) //放置svg的路径.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'});},
}

2.在src/components/svgIcon下新建index.vue组件

<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" />svg>
template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return isExternal(this.iconClass)},iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}},styleExternalIcon() {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}
}
</script>

3.在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件

index.js文件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4.在main.js中引入svg

import './icons' // icon

使用

根据input填写状态动态切换icon颜色

注意： 需要先修改svg文件夹下相应的user.svg文件中去除中的 fill 属性

<el-form ref="loginForm":model="loginForm":rules="loginRules"class="login-form"autocomplete="on"label-position="left"><div class="input-tip">用户名div><el-form-item prop="username"><span class="svg-container"><svg-icon icon-class="user" :class="{ active: loginForm.username }"/>span><el-input ref="username"v-model="loginForm.username"placeholder="请输入用户名称"name="username"type="text"tabindex="1"autocomplete="on"/>el-form-item>
el-form>

.svg-container{position: absolute;top: 50%;left: 15px;transform: translateY(-50%);z-index: 10;
}
.svg-container, .svg-icon {display: inline-block;width: 20px;height: 24px;color:#9696A6;&.active {color: #00BB80;}
}

这样在input框填写时，user.svg的颜色会由 #9696A6 (灰色) 动态切换成 #00BB80(绿色)

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！