Iconコンポーネントでstyle付きのSVGを使うと、クラス名でバッティングして正しく表示されなくなる
Adobe Illustratorで書き出されたSVGは、.cls-1など似たようなクラス名を付けられることが多く、そのまま使うとスタイルがマージや上書きされ、正しく表示されなくなる事があります。
icon1.svg （赤四角）
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<defs>
<style>.cls-1 { fill: #f00; }</style>
</defs>
<rect class="cls-1" width="20" height="20"/>
</svg>icon2.svg （緑四角）
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<defs>
<style>.cls-1 { fill: #0f0; }</style>
</defs>
<rect class="cls-1" width="20" height="20"/>
</svg>TSXでの呼び出し
import { Icon } from 'minista';
export default function () {
return (
<>
<Icon iconId="icon1" />
<Icon iconId="icon2" />
</>
);
}↓ ビルドを行う ↓
出力されるicons.svg（整形済）
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>.cls-1 { fill: #f00; }</style>
<style>.cls-1 { fill: #0f0; }</style>
</defs>
<symbol id="icon1" viewBox="0 0 20 20">
<rect class="cls-1" width="20" height="20"/>
</symbol>
<symbol id="icon2" viewBox="0 0 20 20">
<rect class="cls-1" width="20" height="20"/>
</symbol>
</svg>結果
<use href="/assets/images/icons.svg#icon1"></use> <!-- 緑四角が表示される（赤四角のはず） -->
<use href="/assets/images/icons.svg#icon2"></use> <!-- 緑四角が表示される -->
Iconコンポーネントでstyle付きのSVGを使うと、クラス名でバッティングして正しく表示されなくなる
Adobe Illustratorで書き出されたSVGは、
.cls-1など似たようなクラス名を付けられることが多く、そのまま使うとスタイルがマージや上書きされ、正しく表示されなくなる事があります。icon1.svg （赤四角）
icon2.svg （緑四角）
TSXでの呼び出し
↓ ビルドを行う ↓
出力されるicons.svg（整形済）
結果