diff --git a/.changeset/six-toys-burn.md b/.changeset/six-toys-burn.md new file mode 100644 index 000000000..3a19fc5ea --- /dev/null +++ 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 index be74f93c4..7fae47eb4 100644 --- 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 index c0ec6e23e..6490c3cdf 100644 --- 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 index 8ea50a6db..875c1a256 100644 --- 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 - -``` - -There may be problems with the writing: - -```svg - - - - -``` - -```svg - -``` - -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 index 4c47c3ca4..59aad0e5f 100644 --- 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 - -``` - -可能有问题的写法： - -```svg - - - - -``` - -```svg - -``` - -这些例子里使用了 id 匹配，这样会导致多个相同 svg 同时出现的时候，样式冲突或丢失。 - ## 完成图标 react 组件 在 `components` 目录下参考如下模板完成组件，有两部分需要更改： diff --git a/package.json b/package.json index 7d44c3f5d..9377cf665 100644 --- 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 index 906cc5c26..8802a5cf5 100644 --- 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 index 58b52076e..6d83f9500 100644 --- 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 index 75afe013d..49fda5760 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,6 +84,9 @@ importers: babel-plugin-inline-react-svg: specifier: ^2.0.2 version: 2.0.2(@babel/core@7.23.6) + babel-plugin-react-inline-svg-unique-id: + specifier: ^1.4.0 + version: 1.4.0(@babel/core@7.23.6) classnames: specifier: ^2.3.2 version: 2.3.2 @@ -215,6 +218,9 @@ importers: '@ant-design/icons': specifier: ^5.3.1 version: 5.3.1(react-dom@18.2.0)(react@18.2.0) + '@inline-svg-unique-id/react': + specifier: ^1.2.3 + version: 1.2.3(react@18.2.0) classnames: specifier: ^2.3.2 version: 2.3.2 @@ -335,6 +341,9 @@ importers: '@ctrl/tinycolor': specifier: ^4.0.3 version: 4.0.3 + '@inline-svg-unique-id/react': + specifier: ^1.2.3 + version: 1.2.3(react@18.2.0) antd: specifier: ^5.12.4 version: 5.13.2(react-dom@18.2.0)(react@18.2.0) @@ -1098,6 +1107,16 @@ packages: '@babel/core': 7.23.6 '@babel/helper-plugin-utils': 7.22.5 + /@babel/plugin-syntax-jsx@7.14.5(@babel/core@7.23.6): + resolution: {integrity: sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.23.6 + '@babel/helper-plugin-utils': 7.22.5 + dev: true + /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.6): resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} engines: {node: '>=6.9.0'} @@ -1963,6 +1982,15 @@ packages: dependencies: regenerator-runtime: 0.14.1 + /@babel/template@7.15.4: + resolution: {integrity: sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.23.5 + '@babel/parser': 7.23.6 + '@babel/types': 7.23.6 + dev: true + /@babel/template@7.22.15: resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} engines: {node: '>=6.9.0'} @@ -3812,6 +3840,14 @@ packages: - supports-color dev: true + /@inline-svg-unique-id/react@1.2.3(react@18.2.0): + resolution: {integrity: sha512-Tf6u4pTdkeN4BLuh4aHNFDrKxUoiNbCglou3IDem7x0KRCt/rrhRgLljx85X2k5aAUdLvDhQcpeKVePFarF+8w==} + peerDependencies: + react: ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + dev: false + /@ioredis/commands@1.2.0: resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==} @@ -10480,6 +10516,15 @@ packages: transitivePeerDependencies: - supports-color + /babel-plugin-react-inline-svg-unique-id@1.4.0(@babel/core@7.23.6): + resolution: {integrity: sha512-8pps5AVafDvFpwgyFpkWkt1gutOL10Gq2Y/pDq+6C+IAEVRA8hx+qzHTW1m+wGxDrqyPO+B5etSrvvYo5l8hlA==} + dependencies: + '@babel/plugin-syntax-jsx': 7.14.5(@babel/core@7.23.6) + '@babel/template': 7.15.4 + transitivePeerDependencies: + - '@babel/core' + dev: true + /babel-plugin-styled-components@2.1.4(@babel/core@7.23.6)(styled-components@5.3.11): resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==} peerDependencies: