fix: icon svg style bug (#672)

Co-authored-by: tingzhao.ytz <[email protected]>

.changeset/hot-cheetahs-cheat.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3-icons': patch
+---
+
+fix: icon svg style error

docs/guide/contribute-icons.md

@@ -40,6 +40,13 @@ 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.
 
+Also, please note that do not use `id` in the `style` attribute of the svg, because the `react-inline-svg-unique-id` plugin does not support `style`. We recommend that the properties in `style` be taken out as separate attributes as much as possible:
+
+```diff
+- <circle style="fill:url(#ant-web3-icon-aave-circle-colorful-3);" cx="400" cy="400" r="388"/> # bad
++ <circle fill="url(#ant-web3-icon-aave-circle-colorful-3)" cx="400" cy="400" r="388"/> # good
+```
+
 ## 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:

docs/guide/contribute-icons.zh-CN.md

@@ -40,6 +40,13 @@ group:
 
 在 `svgs` 目录下添加新的 svg 文件，文件名应该和图标名称一致，注意文件名应该使用 [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) 风格。
 
+另外需要注意的是，在 svg 的 `style` 属性中请勿使用 `id`，因为 `react-inline-svg-unique-id` 插件不支持识别 `style`，我们建议 `style` 中的属性尽量拿出来单独作为属性：
+
+```diff
+- <circle style="fill:url(#ant-web3-icon-aave-circle-colorful-3);" cx="400" cy="400" r="388"/> # bad
++ <circle fill="url(#ant-web3-icon-aave-circle-colorful-3)" cx="400" cy="400" r="388"/> # good
+```
+
 ## 完成图标 react 组件
 
 在 `components` 目录下参考如下模板完成组件，有两部分需要更改：

packages/icons/src/components/safeheron-colorful.tsx

@@ -18,4 +18,5 @@ export const SafeheronColorful = React.forwardRef<HTMLSpanElement, IconBaseProps
     />
   );
 });
+
 SafeheronColorful.displayName = 'SafeheronColorful';