[icon]Add plugin for Icon.

packages/rollup-plugin-stdf-icon/README.md

@@ -0,0 +1,70 @@
+
+[简体中文](https://github.com/dufu1991/stdf/blob/main/packages/rollup-plugin-stdf-icon/README_CN.md)
+
+# Introduction
+
+This is a Rollup plugin for [STDF](https://stdf.design) project that combines all SVG files in a specified folder into a single [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol). It can be used in both Rollup and Vite projects, including Vue and React projects created with Vite.
+
+For more information about the STDF Icon component, please refer to the [Icon Guide](https://stdf.design/#/components?nav=icon&tab=2).
+
+# Installation
+
+Using PNPM:
+
+```bash
+pnpm i rollup-plugin-stdf-icon -D
+```
+
+Using NPM:
+
+```bash
+npm i rollup-plugin-stdf-icon -D
+```
+
+# Usage
+
+Configure the plugin in vite.config.js or vite.config.ts:
+
+```js
+// ...
+import symbol from 'rollup-plugin-stdf-icon';
+
+export default defineConfig({
+    // ...
+    plugins:[
+        // ...
+        symbol(),
+        // ...
+    ]
+    // ...
+})
+```
+
+During development, simply place the SVG files you need in the specified input folder (default: `src/assets/svgs`). The plugin will automatically combine them into a single SVG symbol file and output it to the specified output folder (default: `public/fonts`). After building with Vite, the files in the public folder will be copied to the dist folder. Therefore, after building, the combined SVG symbol file will be located in the dist/fonts folder. Please refer to the [Vite Asset Handling](https://vitejs.dev/guide/assets.html#the-public-directory) documentation.
+
+If you need to modify the input/output folders and the filename of the combined file, you can customize the configuration in vite.config.js or vite.config.ts:
+
+```js
+// ...
+symbol({
+    inFile: 'src/assets/icons',
+    outFile: 'public/icons',
+    fileName: 'sprite'
+}),
+// ...
+```
+
+The combined sprite.svg file will be outputted to public/icons/sprite.svg. **In this case, please update the path in the STDF Icon Props to `/icons/sprite.svg`**
+
+
+# Configuration
+
+| Parameter | Default         | Description                                                  |
+| --------- | --------------- | ------------------------------------------------------------ |
+| inFile    | src/assets/svgs | The folder where all the SVG files to be merged are located. |
+| outFile   | public/fonts    | The output path for the merged SVG symbol file.              |
+| fileName  | symbol          | The filename of the merged SVG symbol file.                  |
+
+# License
+
+This project is licensed under the [MIT License](https://github.com/dufu1991/stdf/blob/main/LICENSE). Feel free to use and contribute to this open-source project.

packages/rollup-plugin-stdf-icon/README_CN.md

@@ -0,0 +1,69 @@
+[English](https://github.com/dufu1991/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md)
+
+# 介绍
+
+将指定文件夹内的所有 SVG 组合为一个 [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)，以在 [STDF](https://stdf.design) 项目中使用的 Rollup 插件，当然也支持在 Vite 项目中使用。也支持基于 Vite 创建的 Vue 和 React 项目。
+
+关于 STDF 的 Icon 组件，请参考 [Icon 指南](https://stdf.design/#/components?nav=icon&tab=2)。
+
+# 安装
+
+使用 PNPM：
+
+```bash
+pnpm i rollup-plugin-stdf-icon -D
+```
+
+使用 NPM：
+
+```bash
+npm i rollup-plugin-stdf-icon -D
+```
+
+# 使用
+
+在 vite.config.js 或 vite.config.ts 中配置：
+
+```js
+// ...
+import symbol from 'rollup-plugin-stdf-icon';
+
+export default defineConfig({
+    // ...
+    plugins:[
+        // ...
+        symbol(),
+        // ...
+    ]
+    // ...
+})
+```
+
+开发过程中只需要将用到的 svg 文件放到指定的入口文件夹（默认 `src/assets/svgs`），插件会自动将其合并为一个 SVG symbol 文件，输出到指定的输出文件夹（默认 `public/fonts`）。Vite 构建之后 public 文件夹下的文件会被复制到 dist 文件夹下，所以在构建之后，合并的 SVG symbol 文件会出现在 dist/fonts 文件夹下。请参考 [Vite 配置](https://cn.vitejs.dev/guide/assets.html#the-public-directory)。
+
+如果需要修改输入输出文件夹以及合并的文件名，可以在 vite.config.js 或 vite.config.ts 中修改配置：
+
+```js
+// ...
+symbol({
+    inFile: 'src/assets/icons',
+    outFile: 'public/icons',
+    fileName: 'sprite'
+}),
+// ...
+```
+
+合并的 sprite.svg 文件将输出到 public/icons/sprite.svg。**此时请修改 STDF Icon Props 的 path 为对应的 `/icons/sprite.svg`**
+
+
+# 配置
+
+| 参数     | 默认            | 描述                                    |
+| -------- | --------------- | --------------------------------------- |
+| inFile   | src/assets/svgs | 将要被合并的所有 SVG 文件所在的文件夹。 |
+| outFile  | public/fonts    | 合并后的 SVG symbol 文件的输出路径。    |
+| fileName | symbol          | 合并后的 SVG symbol 文件的文件名。      |
+
+# 许可证
+
+本项目基于 [MIT 许可证](https://github.com/dufu1991/stdf/blob/main/LICENSE)。请随意享受并贡献给这个开源项目。

packages/rollup-plugin-stdf-icon/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import './dist/index.js';

packages/rollup-plugin-stdf-icon/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "rollup-plugin-stdf-icon",
+    "version": "0.0.0",
+    "description": "A Rollup plugin that combines a series of svg into one symbol for use in the STDF project",
+    "main": "index.js",
+    "scripts": {
+        "build": "rollup -c",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "type": "module",
+    "author": "dufu1991",
+    "license": "MIT",
+    "homepage": "https://github.com/dufu1991/stdf/blob/main/packages/rollup-plugin-stdf-icon/README.md",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dufu1991/stdf/tree/main/packages/rollup-plugin-stdf-icon"
+    },
+    "bugs": {
+        "url": "https://github.com/dufu1991/stdf/issues?q=is:issue+is:open+rollup-plugin-stdf-icon"
+    },
+    "files": [
+        "dist/**"
+    ],
+    "engines": {
+        "node": ">=14.14"
+    },
+    "dependencies": {
+        "fs-extra": "^11.1.1",
+        "svgo": "^3.0.2",
+        "svgstore": "^3.0.1"
+    },
+    "devDependencies": {
+        "@rollup/plugin-terser": "^0.4.3",
+        "rollup": "^3.27.0"
+    },
+    "keywords": [
+        "stdf",
+        "rollup",
+        "symbol",
+        "sprite",
+        "vite",
+        "svg",
+        "icon"
+    ]
+}

packages/rollup-plugin-stdf-icon/rollup.config.js

@@ -0,0 +1,8 @@
+import terser from '@rollup/plugin-terser';
+
+export default {
+    input: 'src/index.js',
+    output: [{ file: 'dist/index.js', format: 'es' }],
+    external: ['fs-extra', 'svgo', 'svgstore'],
+    plugins: [terser()],
+};

packages/rollup-plugin-stdf-icon/src/index.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+import fs from 'fs-extra';
+import { optimize } from 'svgo';
+import svgstore from 'svgstore';
+
+export default function symbol(options = {}) {
+    const { inFile = 'src/assets/svgs', outFile = 'public/fonts', fileName = 'symbol', ...rest } = options;
+
+    // 如果 outFile 不存在, 则创建
+    // If outFile does not exist, create it
+    if (!fs.existsSync(outFile)) {
+        fs.mkdirSync(outFile);
+    }
+
+    // 创建一个空的 svgstore
+    // Create an empty svgstore
+    const sprites = svgstore({ cleanDefs: true });
+
+    // 循环 icons 目录下的所有 svg 文件
+    // Loop through all svg files in the icons directory
+    const svgs = fs.readdirSync(inFile);
+
+    svgs.forEach(svg => {
+        // 读取 svg 文件内容, 作为字符串
+        // Read the svg file content as a string
+        const code = fs.readFileSync(`${inFile}/${svg}`, 'utf8');
+
+        // 使用 SVGO 进行优化
+        // Use SVGO for optimization
+        const result = optimize(code);
+
+        // 删除 result 中的 fill p-id width height class 等属性
+        // Delete fill p-id width height class and other attributes in result
+        result.data = result.data
+            .replace(/fill="[^"]*"/g, '')
+            .replace(/p-id="[^"]*"/g, '')
+            .replace(/width="[^"]*"/g, '')
+            .replace(/height="[^"]*"/g, '')
+            .replace(/class="[^"]*"/g, '');
+
+        // 将优化后的 svg 添加到 sprites 中
+        // Add the optimized svg to sprites
+        sprites.toString({ inline: true });
+        sprites.add(svg.replace('.svg', ''), result.data);
+    });
+
+    // 删除 sprites 的 <?xml...?> 标签和 <!DOCTYPE...> 标签 和 <defs/> 标签
+    // Delete the <?xml...?> tag and <!DOCTYPE...> tag of sprites
+    const spritesStr = sprites
+        .toString()
+        .replace(/<\?xml[^>]*>/g, '')
+        .replace(/<!DOCTYPE[^>]*>/g, '')
+        .replace(/<defs\/>/g, '');
+
+    // 写入到指定的文件中
+    // Write to the specified file
+    fs.writeFileSync(outFile + '/' + fileName + '.svg', spritesStr);
+
+    return {
+        name: 'rollup-plugin-stdf-icon',
+    };
+}