ionicons

# Ionicons [Ionicons](http://ionicons.com/) は、Web、iOS、Android、デスクトップアプリ向けに作られた1,300個のアイコンを備えた完全オープンソースのアイコンセットです。Ioniconsは[Ionic Framework](https://ionicframework.com/)用に構築されたため、アイコンにはマテリアルデザインとiOSの両方のバージョンがあります。 注：すべてのブランドアイコンは各所有者の商標です。これらの商標の使用は、Ionicによる商標所有者の承認を示すものではなく、その逆も同様です。 このアイコンパックは[Ionic](http://ionicframework.com/)で使用することを意図していますが、決してそれに限定されるものではありません。個人用でも商用でも、適切と思われる場所で自由に使用できます。無料で使用でき、[MIT](http://opensource.org/licenses/MIT)ライセンスの下で提供されています。 ## 貢献 貢献に興味を持っていただきありがとうございます！[貢献ガイドライン](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md)をお読みいただき、[ヘルプ歓迎](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)ラベルの付いたイシューをご覧ください。 ## Webコンポーネントの使用 Ionicons Webコンポーネントは、アプリでIoniconsを使用するための簡単で高性能な方法です。このコンポーネントは各アイコンのSVGを動的にロードするため、アプリは必要なアイコンのみをリクエストします。 また、表示されているアイコンのみがロードされ、ユーザーの視界から隠れている「フォールドの下」にあるアイコンは、SVGリソースのフェッチリクエストを行わないことにも注意してください。 ### インストール [Ionic Framework](https://ionicframework.com/)を使用している場合、Ioniconsはデフォルトでパッケージ化されているため、インストールは不要です。Ionic FrameworkなしでIoniconsを使用したい場合は、ページの最後、終了`</body>`タグの直前に次の`<script>`を配置して有効にします。 ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` `latest`を任意のIoniconバージョンに置き換えることができます。例： ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### 基本的な使用法 Ioniconsパッケージの組み込みアイコンを使用するには、ion-iconコンポーネントの`name`属性に値を設定します： ```html <ion-icon name="heart"></ion-icon> ``` ### カスタムアイコン カスタムSVGを使用するには、`src`属性にそのURLを指定して外部SVGファイルをリクエストします。`src`属性は`<img src="...">`と同じように機能し、URLは画像をリクエストするWebページからアクセス可能である必要があります。さらに、外部ファイルは有効なSVGのみで、SVG要素内のスクリプトやイベントは許可されません。 ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### カスタムアセットパス ロードするアイコンのセットが異なる場合や、Ioniconアイコンが別のページやパスでホストされている場合は、Ioniconsがアイコンを取得するアセットURLを次のように設定できます： ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // アイコンをロードするルートパスを "<root>/public/svg" に設定 setAssetPath(`${window.location.origin}/public/svg/`); // 特定のアイコンのみをロード addIcons({ add, logoIonic, save }); ``` これにより、次のような名前付きアイコンの使用が可能になります： ```html <!-- これで "<root>/public/svg/heart.svg" からSVGを取得 --> <ion-icon name="heart"></ion-icon> ``` ## バリアント Ioniconsの各アプリアイコンには、`filled`、`outline`、`sharp`のバリアントがあります。これらの異なるバリアントは、アプリをさまざまなプラットフォームでネイティブに感じさせるために提供されています。filledバリアントはサフィックスなしのデフォルト名を使用します。注：ロゴアイコンにはoutlineまたはsharpバリアントはありません。 ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### プラットフォーム固有性 Ionic Frameworkでアイコンを使用する場合、プラットフォームごとに異なるアイコンを指定できます。`md`および`ios`属性を使用し、プラットフォーム固有のアイコン/バリアント名を指定します。 ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## サイズ アイコンサイズを指定するには、定義済みのフォントサイズに`size`属性を使用できます。 ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` または、`ion-icon`コンポーネントに`font-size`CSSプロパティを適用して特定のサイズを設定できます。8の倍数（8、16、32、64など）のピクセルサイズを使用することをお勧めします。 ```css ion-icon { font-size: 64px; } ``` ## 色 `ion-icon`コンポーネントに`color`CSSプロパティを適用してアイコン色を指定します。 ```css ion-icon { color: blue; } ``` ## ストローク幅 `outline`アイコンバリアントを使用する場合、アイコンのサイズや隣接するテキストの幅に対する視覚的なバランスを改善するために、ストローク幅を調整できます。`ion-icon`コンポーネントに`--ionicon-stroke-width`CSSカスタムプロパティを適用して特定のサイズを設定できます。デフォルト値は32pxです。 ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## v4からの移行 アイコンの削除/名前変更のリストについては、[5.0リリースノート](https://github.com/ionic-team/ionicons/releases/tag/5.0.0)を参照してください。 ## ライセンス Ioniconsは[MITライセンス](http://opensource.org/licenses/MIT)の下でライセンスされています。 ## 関連 * [Ioniconsホームページ](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Ionicフォーラム](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)