教你在vue项目中使用svg图标的方法
短信预约 -IT技能 免费直播动态提醒
- svg图标优点
svg与iconfont之类的字体图标在网页中的使用差别不大，可以修改大小，颜色等而且不失真。
- 安装
svg-sprite-loader
npm install --save-dev svg-sprite-loader- 文件夹目录 （xxx.svg 注意：这里的 xxx 不要使用中文）
- assets
-- icon
--- svg
--- index.js
- 配置依赖
// Vue2.x 在 webpack.base.conf.js 中配置如下：
// 注意svg图标的路径 class="lazy" data-src/assets/icon 要写正确
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('class="lazy" data-src/assets/icon')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('class="lazy" data-src/assets/icon')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}
// Vue3.x 在根目录新建 vue.config.js 中配置如下：
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule.exclude.add(/node_modules/)
svgRule
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images')
imagesRule.exclude.add(resolve('class="lazy" data-src/assets/icon'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
}
// Vue4.x 在根目录新建 vue.config.js 中配置如下：
const path = require('path')
module.exports = {
// 使用svg-sprite-loader编译svg，若使用file-loader时排除class="lazy" data-src/icon下的svg矢量图标
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader 否则接下来的 loader 会附加在该规则现有的 loader 之后
svgRule.uses.clear()
svgRule
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './class="lazy" data-src/icon'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.test(/\.svg$/)
.exclude.add(path.resolve(__dirname, './class="lazy" data-src/icon'))
.end()
.use('file-loader')
.loader('file-loader')
},
}
- 在components目录下增加一个
SvgIcon组件
<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" 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'
// 全局注册
Vue.component('svg-icon', SvgIcon)
const req = require.context('./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图标内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
