今回の仕上がりは、こんな感じ
淡い背景に黒いロケットを置き、「まずは、小さな一歩から。」という文字を添えました。アイコンの形と色は保存したままです。画像を押すと、ボタンで作業のきっかけを切り替えられるカードを開けます。
実際にカードを触る · SVG・MIT全文・出典をまとめて保存
ボタンの動作、文章、背景とレイアウトは編集部が制作しました。PhosphorのSVGそのものに動きやボタン機能があるわけではありません。アイコンを動かす代替映像も使っていません。
名前で探して、SVGを一つ保存する
- 公式サイトの検索欄「Search」に
rocket-launchと入力します。今回はその名前のアイコンを選びました。 - 上の設定が「Regular」、サイズが32px、色が
#000000になっていることを確認します。今回使ったのはこの設定のSVGです。ほかの太さや色の出力は試していません。 - 検索結果のロケットを押すと、詳細パネルが開きます。アイコン名が
rocket-launchであることを確認します。 - 詳細の「SVG」のうち、下向きの保存マークが付いた「Download SVG」を押します。もう一つの「SVG」は「Copy SVG」で、ファイルの保存ではなくコードのコピーです。
- 保存した
rocket-launch.svgを開き、ロケットが表示されることを確かめます。使用例ではCSSで表示サイズを変えました。SVG内の形や黒い塗りは変更していません。
今回はサイドブラウザーの保存イベントを取得できなかったため、別のPCブラウザーで同じ検索と保存を実操作しました。そちらでは実ファイルを保存できました。「SVG Raw」、一括ダウンロード、アプリ用パッケージの導入は未検証です。
無料・商用利用でも、何を残せばいい？
公式サイトは無料・オープンソースと案内し、MITライセンスを示しています。MITは商用を含む利用、改変、配布などを許諾していますが、著作権表示と許諾文をコピーや実質的な部分に含める条件があります。「無料だから表示を消してよい」とは扱いません。
今回のZIPにはSVGと一緒に、公式全文をLICENSE.txt、作者・素材名・出典をATTRIBUTION.txtとして入れました。著作権表記はCopyright (c) 2020 Phosphor Iconsです。使用例からもライセンスへ進めます。配布先に合わせ、必要な表示を残してください。
GitHubには複数の関連リポジトリがあります。この紹介では、実際に利用した公式サイトのフッターが示すライセンスを参照しました。別リポジトリの年や条件を、保存した素材へ機械的に当てはめていません。
アイコンを足せば、操作は分かりやすくなる？
ロケットは「出発」や「公開」の雰囲気を添えますが、具体的な操作は文字で説明したほうが伝わります。今回のカードではロケットを装飾として置き、ボタンには「今日の一歩を決める」と書きました。読み上げで同じ意味が重ならないよう、装飾画像の代替テキストは空にしています。
ボタンは作業のきっかけを順番に三つ表示します。抽選ではなく、外部へ何かを送信する操作でもありません。クリックとEnterキーでの切り替えを確認対象にしています。小さな画面ではカードを縦並びにします。
PCでの検索、RegularのSVG保存と作例への配置を試しました。公式ツールのスマホ操作、全アイコン、全スタイル、外部アプリへの取り込みは未検証です。公式Xへのリンクは添えていますが、最近の投稿や人気の規模は確認していません。線画の保存例はFeather、箱と矢印で手順を示す例はdraw.ioも参考になります。