Vue中引⼊svg图标的两种⽅式Vue中引⼊svg图标的⽅式
Vue中引⼊svg图标的⽅式⼀
安装
yarn add svg-sprite-loader --dev
svg组件
index.vue
<!-- svg组件 -->
<template>
<svg class="svg-icon" :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
// svg 的名称
svgName: {
type: String,
required: true
}
},
svg怎么转为pdfcomputed: {
iconName () {
return `#icon-${this.svgName}`
},
svgClass () {
if (this.svgName) {
return 'svg-icon' + this.svgName
} else {
return 'svg-icon'
}
}
}
}
</script>
<style lang="less" scoped>
.svg-icon {
width: 100px;
height: 100px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
注册到全局
index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
// 注册到全局
Vueponent('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext) const req = t('./svg', false, /\.svg$/)
requireAll(req)
chainWebpack: config => {
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
页⾯中使⽤
<!-- svg-name为svg名 -->
<svg-icon svg-name="ic_home_news" />
Vue中引⼊svg图标的⽅式⼆
npm install svg-sprite-loader --save-dev
const path = require('path');
function resolve(dir) {
// __dirname项⽬根⽬录的绝对路径
return path.join(__dirname, dir);
}
chainWebpack: config => {
const svgRule = dule.rule('svg');
// 清除已有的所有loader
// 如果你不这样做，接下来的loader会附加在该规则现有的loader之后
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.include.solve(__dirname, './src/icons/svg'))
.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/icons/svg'))
.end()
.use('file-loader')
.
loader('file-loader');
},
}
建⽴如下的⽂件⽬录
SvgIcon.vue代码
<template>
<svg :class="svgClass" xmlns="/2000/svg">
<use :xlink:href="iconName" xmlns:xlink="/1999/xlink" />
</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: currentColor;
overflow: hidden;
}
</style>
svg⽂件夹下放svg图标
index.js代码
import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon'; // svg组件
// register globally
Vueponent('svg-icon', SvgIcon);
const req = t('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext); requireAll(req);
最后在main.js中引⼊
import './icons';
在页⾯中使⽤svg
icon-class是svg图标名 class-name是你要⾃定义的class类名<svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>
总结
到此这篇关于Vue中引⼊svg图标的两种⽅式的⽂章就介绍到这了，更多相关Vue引⼊svg图标内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

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