Skip to content

Commit

Permalink
fix: icon svg style bug
Browse files Browse the repository at this point in the history
  • Loading branch information
tingzhao.ytz committed Mar 21, 2024
1 parent d374e55 commit 7942403
Show file tree
Hide file tree
Showing 60 changed files with 1,705 additions and 1,422 deletions.
5 changes: 5 additions & 0 deletions .changeset/hot-cheetahs-cheat.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ant-design/web3-icons': patch
---

fix: icon svg style error
7 changes: 7 additions & 0 deletions docs/guide/contribute-icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
7 changes: 7 additions & 0 deletions docs/guide/contribute-icons.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` 目录下参考如下模板完成组件,有两部分需要更改:
Expand Down
1,434 changes: 766 additions & 668 deletions packages/icons/src/__tests__/__snapshots__/index.test.tsx.snap

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/icons/src/components/safeheron-colorful.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ export const SafeheronColorful = React.forwardRef<HTMLSpanElement, IconBaseProps
/>
);
});

SafeheronColorful.displayName = 'SafeheronColorful';
11 changes: 3 additions & 8 deletions packages/icons/src/svgs/aave-circle-colorful.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions packages/icons/src/svgs/akro-colorful.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 9 additions & 9 deletions packages/icons/src/svgs/alpha-circle-colorful.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions packages/icons/src/svgs/any-colorful.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7942403

Please sign in to comment.