vue如何引入svg图标？教你两个办法
发布时间：2022-03-24 14:07:19 所属栏目：语言 来源：互联网
导读：SVG是一种图像文件格式，意思为可缩放的矢量图形，是现在比较流行的图像文件格式之一，使用SVG格式我们就能够直接使用代码来描绘图像。那么我们如果要在vue中引入svg图标，要怎么做呢？ Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg
|
SVG是一种图像文件格式，意思为可缩放的矢量图形，是现在比较流行的图像文件格式之一，使用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 } }, computed: { 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' // 注册到全局 Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /.svg$/) requireAll(req) vue.config.js module.exports = { chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .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 vue.config.js中添加如下代码 const path = require('path'); function resolve(dir) { // __dirname项目根目录的绝对路径 return path.join(__dirname, dir); } module.exports = { chainWebpack: config => { const svgRule = config.module.rule('svg'); // 清除已有的所有loader // 如果你不这样做，接下来的loader会附加在该规则现有的loader之后 svgRule.uses.clear(); svgRule .test(/.svg$/) .include.add(path.resolve(__dirname, './src/icons/svg')) .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, './src/icons/svg')) .end() .use('file-loader') .loader('file-loader'); }, } 建立如下的文件目录 SvgIcon.vue代码 <template> <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg"> <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/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 Vue.component('svg-icon', SvgIcon); const req = require.context('./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> （编辑：安阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
