vue项目中使用svg，有以下步骤：
1、安装 svg-sprite-loader 依赖
npm install svg-sprite-loader --save-dev2、在 src 目录下新建 src/icons/svg 目录，存放项目所使用的所有图标 svg 文件
在 vue-config.js 中添加配置：
module.exports = {
chainWebpack(config) {
//配置svg
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
},3、创建组件 components/SvgIcon.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" ></div>
<svg v-else :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
import { isExternal } from '@/utils/validate'
import '@/icons'
export default {
name: 'svg-icon',
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>
<style scoped>
.svg-icon {
/* width: 1rem;
height: 1rem; */
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
isExternal文件及作用
/**校验传入的iconClass是否为外部链接
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}4、在 src/icons 目录下创建 icons 文件
index.js中
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
如果项目图标文件较多，可以对 icons 目录做详细的划分，然后修改上述 index.js
在 main.js 入口文件中 全局引入 icons。
// main.js
import "./icons";5、使用svg组件文章来源：https://www.toymoban.com/news/detail-601592.html
<svg-icon icon-class="svgName" class="icon" />
//svgName为.svg后缀前的文件名
// 引入组件
import SvgIcon from '@/components/SvgIcon'
components: {
SvgIcon
}注意：svg中样式由 fill属性控制，内联样式中写入，则无法修改；如果内联样式给定了颜色，此时子元素需要显式指定 fill 继承自父元素（否则继承的权重很低，样式无法被应用）文章来源地址https://www.toymoban.com/news/detail-601592.html
svg path {
fill:inherit
}到了这里，关于在vue中使用svg（组件）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
