-
安装svg-sprite-loader依赖
yarn add svg-sprite-loader -D
-
配置vue.config.js
module.exports = { chainWebpack: (config) => { config.module.rules.delete('svg') // 重点:删除默认配置中处理svg, config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include.add(resolve('src/icons/svg')) // 表示目录中的文件需要进行 svg-sprite-loader .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) } }
-
公共组件
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName() { 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: #ffffff; overflow: hidden; } .svg-icon:hover { fill: #FFD200; } </style>
-
引用
<!-- icon-class 对应svg的name --> <SvgIcon class="icon-svg small" icon-class="prev" />
vue 更改svg颜色
最新推荐文章于 2024-05-17 14:32:46 发布