Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: icon svg style error #672

Merged
merged 1 commit into from
Mar 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading