教你在vue项⽬中使⽤svg图标的⽅法svg图标优点
svg与iconfont之类的字体图标在⽹页中的使⽤差别不⼤，可以修改⼤⼩，颜⾊等⽽且不失真。
安装svg-sprite-loader
npm install --save-dev svg-sprite-loader
⽂件夹⽬录（xxx.svg 注意：这⾥的 xxx 不要使⽤中⽂）
- assets
-- icon
--- svg
--- index.js
配置依赖
// Vue2.x 在 f.js 中配置如下：
/
/ 注意svg图标的路径 src/assets/icon 要写正确
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/assets/icon')],
options: {
symbolId: 'icon-[name]'
}
},
{
svg图片怎么使用test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/assets/icon')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}
/
/ Vue3.x 在根⽬录新建 fig.js 中配置如下：
chainWebpack: config => {
const svgRule = dule.rule('svg')
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
// 修改images loader 添加svg处理
const imagesRule = dule.rule('images')
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
// Vue4.x 在根⽬录新建 fig.js 中配置如下：
const path = require('path')
// 使⽤svg-sprite-loader编译svg，若使⽤file-loader时排除src/icon下的svg⽮量图标
chainWebpack: (config) => {
const svgRule = dule.rule('svg')
// 清除已有的所有 loader 否则接下来的 loader 会附加在该规则现有的 loader 之后
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.solve(__dirname, './src/icon'))
.end()
.
use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
const fileRule = dule.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
.exclude.solve(__dirname, './src/icon'))
.end()
.
use('file-loader')
.loader('file-loader')
},
}
在components⽬录下增加⼀个SvgIcon组件
<template>
<div
v-if="isExternal"
:
class="svg-external-icon svg-icon"
v-on="$listeners"
/
>
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">    <use :xlink:href="iconName" rel="external nofollow"  />
</svg>
</template>
<script>
// 检查是否是外部链接
var isExternal function(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
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>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover !important;
display: inline-block;
}
</style>
在icon⽂件夹下index.js中导⼊所有svg⽂件，并将SvgIcon注册到全局
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
// 全局注册
Vueponent('svg-icon', SvgIcon)
const req = t('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
在main.js⽂件中引⼊ svg 配置
import '@/assets/icon'
使⽤
<!-- 其中icon-class对应图标svg⽂件的名称；className对应图标的css样式属性 -->
<svg-icon icon-class="arrow" className="left-arrow"></svg-icon>
备注
若svg图标不能通过样式修改颜⾊，打开svg⽂件，删除style标签⾥的每⼀项fill样式设置。但是如果svg⽂件中使⽤的不是 path 那就没有办法了。⽐如有些在线的⼯具可以把图⽚转成svg格式，转换后svg⽂件中的地址是 base64 ，这种的就不能改变样式了，⽽且放缩也会失真。
到此这篇关于教你在vue项⽬中使⽤svg图标的⽅法的⽂章就介绍到这了，更多相关vue使⽤svg图标内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

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