Skip to content

Commit

Permalink
docs: update common problems when use icona
Browse files Browse the repository at this point in the history
  • Loading branch information
junghyeonsu committed Jan 31, 2024
1 parent d329bd9 commit ba28fa2
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 4 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"eslint.validate": [
"javascript",
Expand Down
63 changes: 60 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,64 @@ If you use this library, please send PR to add your project in this list.

- [daangn/seed-icon](https://github.com/daangn/seed-icon)

## TODO
## Common Problems

### 1. If you use `removeAttrs` and remove `id` prop in svgoConfig option, you have to check that exists `<mask>` tag in your svg file.

If the `<mask />` tag is looking at a specific id value as a URL, the mask tag should not delete the id value in the removeAttrs plugin.

If you use `<mask>` tag and using `removeAttrs` plugin in svgoConfig like below...

```html
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
data-seed-icon="true"
data-seed-icon-version="0.5.4"
>
<g>
<g>
<mask id="path-1-inside-1_12571_4011" fill="currentColor">
<path
d="..."
fill="currentColor"
mask="url(#path-1-inside-1_12571_4011)"
/>
</mask>
</g>
</g>
</svg>
```

- [ ] Check diff and update only changed icons. (Now, always update all icons)
- ISSUE: PDF generate occur all file changes when generate.
The `<mask />` tag must be exception-handled to avoid deleting the id value.

```js
svgoConfig: {
plugins: [
{
name: "removeAttrs",
params: {
attrs: ["id"],
},
fn: () => {
return {
element: {
enter: node => {
// NOTE: The `<mask />` tag must be exception-handled to avoid deleting the id value.

// NOTE: Not working (Maybe bug)
// if (node.name === 'mask') return;

// NOTE: Working
if (node.name !== 'mask') delete node.attributes.id;
}
}
}
}
},
],
},
```

0 comments on commit ba28fa2

Please sign in to comment.