写在前面
之前我开发了一个wsksvg工具，专门处理svg的一款工具。wsksvg 是一个用于 SVG 转换与优化的工具。它能将 SVG 文件转换为 React 或 Vue 组件，支持单文件和批量处理，还能优化 SVG,PNG、JPG 等图片关于它的介绍我放到结尾。在使用阿里图标库中，我灵感来了，那我也可以靠它快速的实现一个图标组件库。有多快，一天不到就开发完成，你只需要，准备好你的svg图标。安装wsksvg工具，然后自动化转成组件，我特地做了集成，专门把生成的组件，自动导入一个index.ts文件中，这样你直接配置打包，找个打包工具打包工具不就可以了嘛？
展示
话不多说，先上效果图。
是不是觉得简洁，而且比较好看，没有那么多花里胡哨（个人认为还是比较好看的，毕竟我仿造的是阿里的），这次给大家带来一个能够快速建设企业内部图标库模板以及插件，已经开源，在文章的结尾。附上链接，耐心看一下我的介绍。再去试试也不迟。
对比阿里
搭建图标组件库能解决这些问题
首先先列一下开发中经常遇到图标的问题：
- 图标分散，不便于统一管理
- 项目中使用图标混乱
- 可复用度低，维护成本高，开发体验差
先说说为什么使用的是svg图标
在开发前端应用时，图标 是一个不可或缺的视觉元素。它们不仅能够提升界面的美观度，还能以简洁直观的方式传达功能和信息，增强用户体验。很多时候，一个 合适的图标 甚至可以胜过长篇累牍的文字描述。今天，我们就来打造一款使用高效的图标库 ------ SVG 图标库。
SVG(Scalable Vector Graphics) 图标库因其可伸缩性、清晰度和灵活性，成为了现代前端开发中的优选方案。
SVG 格式的图标有以下优势：
-
无限缩放 ：SVG 图标可以在不同分辨率下保持清晰，适合多种设备和屏幕尺寸。
-
文件大小 ：通常比位图图标（如 PNG 或 JPEG）小，有助于减少加载时间和带宽消耗。
-
样式定制 ：SVG 可以通过 CSS 和 JavaScript 进行样式和行为的定制，提供更高的灵活性。
-
可访问性 ：SVG 图标可以包含标签和描述，提高网站的可访问性。
wskicons 图标模版特性
• 快速转换与汇总导出：借助 wsksvg 工具，可迅速将 svg 图标转换为组件，并自动汇总导出，极大提高了开发效率。
• 简洁美观的页面设计：页面设计简洁大方，参考阿里图标库的设计风格，视觉效果良好。
•便捷的在线交互功能：用户可在线改变图标颜色和大小，满足不同场景下的使用需求。
• 丰富实用的功能集合：具备下载 svg、png、jpeg 图片，复制组件、复制 svg 源码等实用功能。
•便捷的图库搭建方式：用户只需对文件进行分类，即可轻松构建一个图库集。
• 开源与易上手特性：已开源源码和 wsksvg 工具，用户可根据自身需求进行修改，快速上手使用。
• 配置完善的打包工具：已配置好 vite 打包工具，用户只需修改名称即可直接使用。
注意：目前该图标组件库为 react 版本，这是由于本人习惯使用 react，不过对于 Vue 版本，原理大致相同。
为什么我敢说一天能打造出来呢，可能实际只用半天
1.搭建框架
首先搭建项目的基础框架，为后续开发奠定基础。
2.安装wsksvg 工具 npm install wsksvg -g
通过命令 npm install wsksvg -g 安装 wsksvg 工具，确保工具安装正确且可全局使用。
3.看一下wsksvg 使用说明
注意：需要配置wsksvg.json文件，因为我做这个工具，初心是保留原来的颜色，所以，如果专门弄成组件库，需要自己进行配置一下，我这边直接给出。
bash
{
"svgo": {
"js2svg": {
"indent": 2, // 设置 SVG 输出时的缩进级别，便于阅读。值为 2 表示每级缩进两个空格。
"pretty": true // 是否美化输出的 SVG 代码。如果为 true，则输出的 SVG 将会更具可读性。
},
"plugins": [
{
"name": "preset-default", // 使用 SVGO 默认预设插件
"params": {
"overrides": {
"removeViewBox": false, // 是否移除 viewBox 属性。false 表示保留，确保 SVG 在不同尺寸下正确显示。
"inlineStyles": {
"onlyMatchedOnce": false // 是否仅对匹配的样式进行内联。如果为 false，则所有样式都会内联。
}
}
}
},
{
"name": "convertStyleToAttrs", // 将内联样式转换为 SVG 属性
"params": {
"onlyMatchedOnce": false // 是否仅对匹配的样式进行转换。如果为 false，则所有内联样式都会被转换为属性。
}
},
{
"name": "removeAttrs", // 移除指定的属性
"params": {
"attrs": [
"svg:style" // 移除 SVG 元素上的 style 属性
]
}
},
{
"name": "convertColors",
"params": {
"currentColor": true //改变颜色插件是否继承父元素颜色
}
},
{
"name": "addAttributesToSVGElement", // 向 SVG 元素添加额外属性
"params": {
"attributes": [
{
"width": "1em", // 设置 SVG 的默认宽度为 1em
"height": "1em", // 设置 SVG 的默认高度为 1em
"aria-hidden": true, // 为 SVG 添加 aria-hidden 属性，指示屏幕阅读器忽略 SVG。
"fill": "currentColor", //当前颜色
"focusable": "false" // 设置 focusable 属性为 false，防止 SVG 在键盘导航中获得焦点。
}
]
}
}
]
}
}4.项目里新建文件夹分类好svg图标
在项目中创建新的文件夹，将 svg 图标按照一定的规则进行分类存放，方便后续处理。
5.使用wsksvg工具进行转化
利用 wsksvg 工具对分类好的 svg 图标进行转化操作。
6.自动汇总生成
经过转化后，组件会自动汇总生成，为后续打包做好准备。
7.进行打包
在打包之前，需先运行 tsc 命令将 ts 转为 js，并生成声明文件。tsc 是 TypeScript 官方的命令行编译器，用于检查代码并将其编译成 JavaScript 代码。tsc 默认使用当前目录下的配置文件 tsconfig.json，但也可接受独立的命令行参数，命令行参数会覆盖 tsconfig.json 的相关配置（例如，若命令行指定了所要编译的文件，tsc 将忽略 tsconfig.json 的 files 属性）。以下是 vite 打包工具的配置示例：
bash
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react() ],
build: {
lib: {
entry: resolve(__dirname, './src/icons/index.ts'),
name: 'DoveIcons',
fileName: (format) => `wskicons.${format}.js`
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['react'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
react: 'React'
}
}
}
}
})8.npm 发包
完成上述步骤后，即可进行 npm 发包操作。
项目中使用
是不是很简单，总体的一个设计思路，就是这样的，我用了一天不到，就实现用来了。半天写官网。如果不清楚wsksvg是什么，可以看看相关文章~。
写在最后
如果内容碰巧对你有帮助，同时也希望大家帮助我继续成长，给我pr, issue, star，下面是本文相关的仓库。
在线预览地址：wskang12138/wsk-icons: Svg incons and plugin library
github地址：github.com/wskang12138...
wsksvg相关文章
wsksvg --- SVG 转换与优化工具wsksvg它不仅能够，实现对svg的优化，包括png,jpg图片的优化，还能够 - 掘金
wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化通过 wsksvg 插件，开发者可以高效地 - 掘金
wsksvg - 优化升级，支持多进程处理文件和 SVG 图像转化在不断发展的前端技术中，图像的优化和处理始终是提升应用 - 掘金