fix: use react-inline-svg-unique-id plugin for fix svg id issue in ru…

…ntime (#616) * fix: use react-inline-svg-unique-id plugin for fix svg id issue in runtime * chore: add changelgo * chore: remove useless doc --------- Co-authored-by: tingzhao.ytz <[email protected]>
ant-design · Mar 8, 2024 · 0958090 · 0958090
1 parent 8e002c8
commit 0958090
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 106 deletions.
diff --git a/.changeset/six-toys-burn.md b/.changeset/six-toys-burn.md
@@ -0,0 +1,6 @@
+---
+'@ant-design/web3-icons': patch
+'@ant-design/web3': patch
+---
+
+fix: use react-inline-svg-unique-id plugin for fix svg id issue in runtime
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -265,26 +265,5 @@ export default defineConfig({
       suffix: '-cn',
     },
   ],
-  extraBabelPlugins: [
-    [
-      'inline-react-svg',
-      {
-        svgo: {
-          plugins: [
-            {
-              name: 'preset-default',
-              params: {
-                overrides: {
-                  cleanupIDs: {
-                    // Don't minify ids in `svg` to avoid conflict.
-                    preservePrefixes: ['ant-web3-icon-'],
-                  },
-                },
-              },
-            },
-          ],
-        },
-      },
-    ],
-  ],
+  extraBabelPlugins: ['inline-react-svg', 'react-inline-svg-unique-id'],
 });
diff --git a/.fatherrc.base.ts b/.fatherrc.base.ts
@@ -10,28 +10,5 @@ export default defineConfig({
     output: 'dist/esm',
     transformer: 'babel',
   },
-  extraBabelPlugins: [
-    [
-      'inline-react-svg',
-      {
-        svgo: {
-          plugins: [
-            {
-              name: 'preset-default',
-              params: {
-                overrides: {
-                  cleanupIDs: {
-                    // Don't minify ids in `svg` to avoid conflict.
-                    preservePrefixes: ['ant-web3-icon-'],
-                  },
-                },
-              },
-            },
-          ],
-        },
-      },
-    ],
-    // Auto add .js extension for import in node environment when use with NextJS and Remix.
-    'babel-plugin-add-import-extension',
-  ],
+  extraBabelPlugins: ['inline-react-svg', 'react-inline-svg-unique-id'],
 });
diff --git a/docs/guide/contribute-icons.md b/docs/guide/contribute-icons.md
@@ -40,35 +40,6 @@ The `packages/icons` directory corresponds to the `@ant-design/web3-icons` packa
 
 Add new svg in `svgs` folder, file name should be the same as icon name, and use the [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) style for file name.
 
-If you need to use `id` or `classname` in svg, you need to add the prefix `ant-web3-icon-`. This is to prevent `svgo` from simplifying it, which causes the type to not be found. In svg, try to use the inline way to write styles, such as `fill: fff` for colors.
-
-Good writing:
-
-```svg
-<path
-  style="fill:#020041;"
-  d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
-/>
-```
-
-There may be problems with the writing:
-
-```svg
-<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="color">
-  <stop stop-color="#FF8B8B" offset="0%"></stop>
-  <stop stop-color="#FF1717" offset="100%"></stop>
-</linearGradient>
-```
-
-```svg
-<path
-  fill:url(#color)
-  d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
-/>
-```
-
-In these examples, the ids are used as the match, which causes style conflicts or loss when multiple identical svgs appear at the same time.
-
 ## Complete the icon react component
 
 In the `components` directory, refer to the following template to complete the component. There are two parts that need to be changed:

diff --git a/docs/guide/contribute-icons.zh-CN.md b/docs/guide/contribute-icons.zh-CN.md
@@ -40,35 +40,6 @@ group:
 
 在 `svgs` 目录下添加新的 svg 文件，文件名应该和图标名称一致，注意文件名应该使用 [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) 风格。
 
-svg 里面如果需要使用 `id` 或者 `classname`，需要加上前缀 `ant-web3-icon-`，这是为了避免 `svgo` 将其简化导致找不到类型。svg 中尽量使用内联的方式写样式，比如颜色用 `fill: #fff`。
-
-好的写法：
-
-```svg
-<path
-  style="fill:#020041;"
-  d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
-/>
-```
-
-可能有问题的写法：
-
-```svg
-<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="color">
-  <stop stop-color="#FF8B8B" offset="0%"></stop>
-  <stop stop-color="#FF1717" offset="100%"></stop>
-</linearGradient>
-```
-
-```svg
-<path
-  fill:url(#color)
-  d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
-/>
-```
-
-这些例子里使用了 id 匹配，这样会导致多个相同 svg 同时出现的时候，样式冲突或丢失。
-
 ## 完成图标 react 组件
 
 在 `components` 目录下参考如下模板完成组件，有两部分需要更改：

diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "antd-style": "^3.6.1",
     "babel-plugin-add-import-extension": "^1.6.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-react-inline-svg-unique-id": "^1.4.0",
     "classnames": "^2.3.2",
     "dumi": "^2.2.17",
     "dumi-theme-antd-web3": "^0.3.12",

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -66,6 +66,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^5.3.1",
+    "@inline-svg-unique-id/react": "^1.2.3",
     "classnames": "^2.3.2"
   }
 }
diff --git a/packages/web3/package.json b/packages/web3/package.json
@@ -42,16 +42,17 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.18.2",
     "@ant-design/icons": "^5.3.1",
+    "@ant-design/web3-assets": "workspace:*",
     "@ant-design/web3-common": "workspace:*",
     "@ant-design/web3-icons": "workspace:*",
-    "@ant-design/web3-assets": "workspace:*",
     "@ctrl/tinycolor": "^4.0.3",
+    "@inline-svg-unique-id/react": "^1.2.3",
     "antd": "^5.12.4",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@ant-design/web3-wagmi": "workspace:*",
     "@ant-design/web3-solana": "workspace:*",
+    "@ant-design/web3-wagmi": "workspace:*",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.19",
     "father": "^4.3.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml