ionic無料でおしゃれなアイコンを使う方法【フロントエンド開発】

　こんにちは。かじです。

　今回はしゃれたionicでアイコンを使用する方法を紹介します。

　個人開発をしていて、一つの障壁になるのが、アイコンです。有料素材を買わなければいけないとか、渋々いけてない無料アイコンを使用したり、そもそもアイコンを使わないなんてこともあるかもしれません。

　そんな方にお勧めなのが、ioniciconsです。

1.ionicとは

　ionicとは、UI&UX開発のためのフロントエンドツールになります。特にionicを使用することでモバイル向けのUI開発をより効率的に行うことが可能になります。React、Vue、Angularといったフロントエンドフレームワークやライブラリと組み合わせることも可能です。

　また、capacitorというライブラリと組み合わせることによって、iOSおよびAndroid用のクロスプラットフォームアプリを開発することができます。これによって、HTML、CSS、JavaScriptというWebのフロントエンド技術だけでモバイルアプリの開発を行うことが可能になります。

　ioniciconsはそのionicが提供しているアイコンのサービスになります。

　それでは、早速ioniciconsを使ってみましょう。

　まずは、下記URLにアクセスしてください。

　次に画面上部のUsageを開き、Installationの2行あるscriptをコピーしてhtmlの</body>の前に貼り付けます。

　あとは好きなアイコンを選択し、WEB COMPONENT CODEにある<ionic-icon>をコピーします。

　ちなみにSVG形式でダウンロードも可能です。

↓こんな感じで埋め込めます↓

今回はこここまでになります。うまくioniciconsを使って楽しい開発ライフを送ってください。