< 返回新闻公告列表

vue如何引入svg图标?

发布时间:2023-1-18 15:24:44    来源: 纵横云

SVG是一种图像文件格式,意思为可缩放的矢量图形,是现在比较流行的图像文件格式之一,使用SVG格式我们就能够直接使用代码来描绘图像。那么我们如果要在vue中引入svg图标,要怎么做呢?

Vue中引入svg图标的方式一

安装

yarn add svg-sprite-loader --dev

svg组件

index.vue

注册到全局

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()

}

}

页面中使用

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代码

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类名

总结

文本介绍了vue引入svg图标的两种方式,需要的朋友可以参考学习,希望对大家学习有帮助,想要了解更多vue 引入svg图标的内容,可以关注其他相关文章。

文本转载自脚本之家

vx:19906048603
vx:19906048603 vx:19906048603
返回顶部
返回顶部 返回顶部