Iconoirの使い方｜保存アイコンのSVGを、文字付きダウンロードリンクへ

今回の仕上がりは、こんな感じ

小さな保存アイコンの隣に、保存する内容を文字で添えました。「SVGと利用条件を保存」を押すと、実際にSVGとMIT全文をまとめたZIPをダウンロードできます。

アイコンは公式サイトから取得した黒い線画です。形と色は変更していません。背景、文章、リンクの機能は編集部が作りました。SVG自体にダウンロード処理が入っているわけではありません。

公式サイトを開き、検索欄「Search...」にdownloadと入力します。「download-circle」や「download-square」も見つかりましたが、今回は囲みのない「download」を選びました。

そのアイコンへポインターを重ねると、「Copy SVG」と「Download」が現れます。今回押したのは「Download」です。「Copy SVG」はコードのコピーなので、同じ保存操作とは扱いません。

download.svgの保存が完了したことを確認し、ファイルを開いて下向き矢印と横線が表示されるか確かめます。右の「Customize」はOptical Sizeが24、Stroke Weightが1.5、色が黒のままでした。今回はこれらの設定を変更していません。

検索語と同じ名前のファイルを取得できるので、使うアイコンを一つずつ試す用途に便利でした。ただし、似た図柄や塗りつぶし版も並ぶため、保存前に名前と見た目を見比べます。

公式サイトは無料・オープンソースと案内しています。今回の検索とSVG保存でも、登録や支払いはありませんでした。公式MITライセンスは商用を含む利用、改変、配布などを認める一方、コピーや実質的な部分に著作権表示と許諾文を含める条件を示しています。

サイト右側のスポンサー広告は、Iconoirとは別の素材サービスへの案内です。そこに書かれた素材数やサービス内容を、今回保存したIconoirの条件として使っていません。

使用例では、リンクをTabで選びEnterでも保存できます。アイコンは文字と同じ操作を示す装飾なので、画像の代替テキストは空にしました。リンクの名前は「SVGと利用条件を保存」とし、アイコンが見えなくても内容が伝わるようにしています。

PCで検索・通常のdownloadの保存・作例への配置を確認しました。作例はPC幅とスマホ幅で表示を確かめ、EnterキーでもZIPを保存できました。公式サイトのスマホ実機操作、全アイコン、塗りつぶし版、フォントや開発用パッケージは未検証です。最近のSNS投稿や人気の規模も確認していません。

同じ線画でも形や太さは素材ごとに違います。色を変えて使った例はFeather、ロケットをカードに添えた例はPhosphor Iconsで見比べられます。自分で図形を描くならMethod DrawのSVG保存例も参考になります。