【Vue3】图标处理方案SvgIcon

1、安装svg-sprite-loader

npm i -D svg-sprite-loader

2、配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = defineConfig({transpileDependencies: true,chainWebpack(config) {// 设置 svg-sprite-loader// config 为 webpack 配置对象// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则.rule('svg')// 忽略.exclude.add(resolve('src/icons'))// 结束.end()// config.module 表示创建一个具名规则，以后用来修改规则config.module// 规则.rule('icons')// 正则，解析 .svg 格式文件.test(/\.svg$/)// 解析的文件.include.add(resolve('src/icons'))// 结束.end()// 新增了一个解析的loader.use('svg-sprite-loader')// 具体的loader.loader('svg-sprite-loader')// loader 的配置.options({symbolId: 'icon-[name]'})// 结束.end()}
})

3、工具类

在icons/index.js中

import SvgIcon from '@/components/SvgIcon'// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context('./svg', false, /\.svg$/)
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))export default app => {app.component('svg-icon', SvgIcon)
}

在 main.js 中引入该文件

// 导入 svgIcon
import installIcons from '@/icons'
const app = createApp(App)
installIcons(app)

4、使用

<svg-icon icon="user" />

【Vue3】图标处理方案SvgIcon相关推荐

Vue组件Icon图标处理方案
Icon图标处理方案记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题. 分析,对于element-plus的图标可以通过 ...
一种清除windows通知区域“僵尸”图标的方案——Windows7系统解决方案
Windows7下"僵尸"图标的解决方案从<一种清除windows通知区域"僵尸"图标的方案--问题分析>(以后简称<问题分析>)一文 ...
一种清除windows通知区域“僵尸”图标的方案——XP系统解决方案
XP下"僵尸"图标的解决方案从<一种清除windows通知区域"僵尸"图标的方案--问题分析>(以后简称<问题分析>)一文中分析的通知 ...
一种清除windows通知区域“僵尸”图标的方案——问题分析
通知区域名称有趣的历史假如说到windows通知区域,可能很多人还是不清楚它是什么.如果改称Tray区域,可能有人就懂了.如果再白话点,叫它"托盘"或者"系统托盘&qu ...
Vue3导出pdf方案
Vue3导出pdf方案 1.引入两个依赖 npm i html2canvas npm i jspdf 2.在utils文件夹下新建htmlToPdf.js文件 // 页面导出为pdf格式 import ...
Icon 图标处理方案：SvgIcon
在vue项目中,我们除了使用组件库(ant-design-vue element-ui)的icon以外,还有我们自己自定义的图标,对于自定义图标的话,我们暂时还缺少显示的方式.所以说我们需要一个自定义 ...
技术选型（Vue3 + TS）方案
1. 编程语言的选型 1.1 js 1.1.1 js简介 JavaScript ( JS ) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web 页面的脚本语言而出名的, ...
flutter中使用图标（含自制图标库方案）
flutter中使用图标(含自定义图标图) 作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...
Android 8.0 华为手机桌面应用图标显示圆形适配方案
Android 8.0的启动图标适配方案可以参考以下两篇文章一篇是郭霖大神的Android应用图标微技巧,8.0系统中应用图标的适配还有另外一篇:android8.0桌面图标适配以及相应问题的解决 ...

【Vue3】图标处理方案SvgIcon

1、安装svg-sprite-loader

2、配置vue.config.js

3、工具类

4、使用

【Vue3】图标处理方案SvgIcon相关推荐

最新文章

热门文章