ionic-team / ionic-team/ionicons

src tag for custom icons does not render for some svg group ids

オープン
#888 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
help wanted type: bug
主要言語
TypeScript
スター
18.2k
フォーク
2.1k
PR マージ指標
30日以内にマージされた PR はありません

説明

When adding a custom icon to ion-icon component using the src tag, some ids cause the svg to not be inserted into the DOM / rendered. For example, if you change the `g id="o"` to an id of "on" or "onon" or "one" or "OnePage" or "OnePage--my-id-1" or many other things, the icon doesn't get put inside the `icon-inner` div. Ids that I have found which do make the svg add into the ion-icon element: "a", "b", "bb", "bbb", "bbbb". "O". Removing the id from the group tag allows the icon to render into the DOM.

works:

```

```

doesn't work:

```

```

I can't think of any logical reason why changing this id arbitrarily makes this svg sometimes work and sometimes not? Also, the issue is only when the svg is used as an ionicon not when it is put inside of an ion-button directly, for example.

To reproduce, save the above xml as .svg file in the assets folder and link it with ionicons, eg: ``

EDIT: After searching through the code for ionicons, I found [this line](https://github.com/ionic-team/ionicons/blob/master/src/components/icon/validate.ts#L42). For some reason if the element value contains "on" in any case then it thinks the svg is invalid. What is the purpose behind this conditional? How could we fix it?

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start at src/components/icon/validate.ts line 42 and inspect why SVG element values containing "on" are treated as invalid. Reproduce with the provided assets/icon.svg examples through an ion-icon src attribute, then verify that ids such as "on" render while invalid SVG handling remains intact.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
バグ
難易度
2/5
見積もり時間
1〜3時間
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。