- 首先我们得有图标
- 这里我们从网上下载svg文件或者UI给你导出svg文件
- 我们在src 文件下新建一个放置svg 文件 的文件夹 @/src/icons.将所有 icon 放在这个文件夹下。
- 创建 icon-component 组件
-
<template> <svg :class="svgClass" aria-hidden="true" :color="svgColor" > <use :xlink:href="iconName" /> </svg> </template> <script lang="ts"> import { Component, Vue, Prop } from 'vue-property-decorator'; @Component({ components: {} }) export default class SvgIcon extends Vue { @Prop({ default: null, type: String }) iconClass!: String; @Prop({ default: '', type: String }) className!: String; @Prop({ default: null, type: String }) svgColor!: String; get iconName() { return `#icon-${this.iconClass}`; } get svgClass() { if (this.className) return `svg-icon ${this.className}`; return 'svg-icon'; } } </script> <style scoped> .svg-icon { width: 2em; height: 2em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
- 在icons 文件夹放一个index.js 这个js 的作用是引入 icon组件并全局注册 并实现 自动引入
@/src/icons
下面所有的图标了- 之后我们就要使用到 webpack 的 require.context。很多人对于
require.context
可能比较陌生,直白的解释就是-
require.context("./test", false, /.test.js$/); 这行代码就会去 test 文件夹(不包含子目录)下面的找所有文件名以
.test.js
结尾的文件能被 require 的文件。 更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
-
-
import Vue from 'vue'; import IconSvg from '@/components/IconSvg/IconSvg.vue'; // 全局注册icon-svg Vue.component('icon-svg', IconSvg); // requires and returns all modules that match const requireAll = requireContext => requireContext.keys().map(requireContext); // import all svg const req = require.context('./svg', true, /\.svg$/); requireAll(req);
- 之后我们就要使用到 webpack 的 require.context。很多人对于
- svg-sprite-loader 依赖 install
- 它是一个 webpack loader ,可以将多个 svg 打包成
svg-sprite
。 - 我们发现
vue-cli
默认情况下会使用url-loader
对svg进行处理,会将它放在/img
目录下,所以这时候我们引入svg-sprite-loader
会引发一些冲突。 -
//默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader 进行处理。 { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }
- 它是一个 webpack loader ,可以将多个 svg 打包成
-
- 解决方案有两种,最简单的就是你可以将 test 的 svg 去掉,这样就不会对svg做处理了,当然这样做是很不友善的。
- 你不能保证你所有的 svg 都是用来当做 icon的,有些真的可能只是用来当做图片资源的。
- 不能确保你使用的一些第三方类库会使用到 svg。
- 所以最安全合理的做法是使用 webpack 的 exclude 和 include ,让
svg-sprite-loader
只处理你指定文件夹下面的 svg,url-loaer
只处理除此文件夹之外的所以 svg,这样就完美解决了之前冲突的问题。 代码如下 - 这只是cli2 的配置, cli3 配置都在vue.config.js 里面 详情参看文档 webpack相关 | vue-cli3
- 这里吧我自己写的给贴出来
-
module.exports = { lintOnSave: true, baseUrl: './', productionSourceMap: process.env.NODE_ENV !== 'production', chainWebpack: (config) => { config.resolve.alias.set('@images', resolve('./src/assets/images')); config.resolve.alias.set('@svg', resolve('./src/icons/svg')); config.module.rules.delete('svg'); // 重点:删除默认配置中处理svg, config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include .add(resolve('src/icons/svg')) // 处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]', }); }, ......
- 解决方案有两种,最简单的就是你可以将 test 的 svg 去掉,这样就不会对svg做处理了,当然这样做是很不友善的。
这样配置好了,开始使用了.
<icon-svg icon-class="send" className="icon"
/>
效果
参考链接: 手摸手,带你优雅的使用 icon
更详细的 可以去看看上面链接,大神带你飞
分类:
js-vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库