docs: Add custom icons to support Rsbuild documentation (#7743)

2 weeks ago · b0d9309471
2 changed files with 165 additions and 1 deletions
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -122,6 +122,8 @@ See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.199

 ### Custom SVG Icon

+#### vue cli 3
+
 You can import SVG icon as an vue component by using `vue cli 3` and [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader). `vue-svg-loader`'s `options` [reference](https://github.com/visualfanatic/vue-svg-loader).

 ```js
@ -149,6 +151,84 @@ export default defineComponent({
 });
 ```

+#### Rsbuild
+
+Rsbuild is a new generation of build tool, official website https://rsbuild.dev/  
+Create your own `vue-svg-loader.js` file, which allows you to customize and beautify SVG, and then configure it in `rsbuild.config.ts`
+
+```js
+// vue-svg-loader.js
+/* eslint-disable */
+const { optimize } = require('svgo');
+const { version } = require('vue');
+const semverMajor = require('semver/functions/major');
+
+module.exports = async function (svg) {
+  const callback = this.async();
+
+  try {
+    ({ data: svg } = await optimize(svg, {
+      path: this.resourcePath,
+      js2svg: {
+        indent: 2,
+        pretty: true,
+      },
+      plugins: [
+        'convertStyleToAttrs',
+        'removeDoctype',
+        'removeXMLProcInst',
+        'removeComments',
+        'removeMetadata',
+        'removeTitle',
+        'removeDesc',
+        'removeStyleElement',
+        'removeXMLNS',
+        'removeXMLProcInst',
+      ],
+    }));
+  } catch (error) {
+    callback(error);
+    return;
+  }
+
+  if (semverMajor(version) === 2) {
+    svg = svg.replace('<svg', '<svg v-on="$listeners"');
+  }
+
+  callback(null, `<template>${svg}</template>`);
+};
+```
+
+```js
+// rsbuild.config.ts
+/* eslint-disable */
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  tools: {
+    bundlerChain(chain, { CHAIN_ID }) {
+      chain.module.rule(CHAIN_ID.RULE.SVG).exclude.add(/\.svg$/);
+    },
+    rspack: {
+      module: {
+        rules: [
+          {
+            test: /\.svg$/,
+            use: ['vue-loader', 'vue-svg-loader'],
+          },
+        ],
+      },
+      resolveLoader: {
+        alias: {
+          'vue-svg-loader': require('path').join(__dirname, './vue-svg-loader.js'),
+        },
+      },
+    },
+  },
+});
+```
+
 The following properties are available for the component:

 | Property | Description                                      | Type             | Default        |
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -119,7 +119,9 @@ export default defineComponent({

 ### 自定义 SVG 图标

-如果使用 `vue cli 3`，可以通过配置 [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) 来将 `svg` 图标作为 `Vue` 组件导入。更多`vue-svg-loader` 的使用方式请参阅 [文档](https://github.com/visualfanatic/vue-svg-loader)。
+#### vue cli 3
+
+可以通过配置 [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) 来将 `svg` 图标作为 `Vue` 组件导入。更多`vue-svg-loader` 的使用方式请参阅 [文档](https://github.com/visualfanatic/vue-svg-loader)。

 ```js
 // vue.config.js
@ -146,6 +148,88 @@ export default defineComponent({
 });
 ```

+#### Rsbuild
+
+Rsbuild 是新一代构建工具，官网 https://rsbuild.dev/
+
+自己实现一个 `vue-svg-loader.js` 文件，好处是可以自定义美化 svg，然后在 `rsbuild.config.ts` 中配置：
+
+```js
+// vue-svg-loader.js
+/* eslint-disable */
+const { optimize } = require('svgo');
+const { version } = require('vue');
+const semverMajor = require('semver/functions/major');
+
+module.exports = async function (svg) {
+  const callback = this.async();
+
+  try {
+    ({ data: svg } = await optimize(svg, {
+      path: this.resourcePath,
+      js2svg: {
+        indent: 2,
+        pretty: true,
+      },
+      plugins: [
+        'convertStyleToAttrs',
+        'removeDoctype',
+        'removeXMLProcInst',
+        'removeComments',
+        'removeMetadata',
+        'removeTitle',
+        'removeDesc',
+        'removeStyleElement',
+        'removeXMLNS',
+        'removeXMLProcInst',
+      ],
+    }));
+  } catch (error) {
+    callback(error);
+    return;
+  }
+
+  if (semverMajor(version) === 2) {
+    svg = svg.replace('<svg', '<svg v-on="$listeners"');
+  }
+
+  callback(null, `<template>${svg}</template>`);
+};
+```
+
+```js
+// rsbuild.config.ts
+/* eslint-disable */
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+
+export default defineConfig({
+  tools: {
+    bundlerChain(chain, { CHAIN_ID }) {
+      chain.module
+        // 先给svg排除默认的规则，方便下面自定义loader
+        .rule(CHAIN_ID.RULE.SVG)
+        .exclude.add(/\.svg$/);
+    },
+    rspack: {
+      module: {
+        rules: [
+          {
+            test: /\.svg$/,
+            use: ['vue-loader', 'vue-svg-loader'],
+          },
+        ],
+      },
+      resolveLoader: {
+        alias: {
+          'vue-svg-loader': require('path').join(__dirname, './vue-svg-loader.js'),
+        },
+      },
+    },
+  },
+});
+```
+
 `Icon` 中的 `component` 组件的接受的属性如下：

 | 字段   | 说明                    | 类型             | 只读值         |