見出し画像

大量のハイクオリティなアイコンがゲットできる Streamline Icons と webフォントに変換できる IcoMoon

bissy

私のツイッタメモより…

Steamline Icons

これですね！

会員登録するだけで、かわいい SVG / pdf アイコンが300、png アイコンが30,000も！ダウンロードできる魅力的なサービスです💪

全てのアイコンに3つのウェイトがあって、サイトのテイストに合わせて使えるのがまた便利。

しかもサイトのデザインがかわいい…！このアニメーションは jsフレームワークの GSAP で作られてるみたいですね🤓ふむふむ

アウトライン化された SVG は、IcoMoon などの webフォントジェネレーターでインポートして、必要なものだけを選んでオリジナルセットを作っちゃいましょう😇もちろん他のアイコンもセットに入れられますよ〜
私も自作のSVGアイコンを作ってよくセットに組み込んだりしたりしてます💪SVG！SVG！

SVGアイコンを IcoMoon に登録して webフォント化してみる

こういう感じですね〜
左肩の Import Icons から、アウトライン化された SVG アイコンをアップします。読み込まれたら必要なのだけ選択。

スクリーンショット 245

そしてサイト下部固定の Generate Font を押すと、
こんな風にwebフォントの一式が用意されます！便利〜〜！

Quick Usage という機能を ON にすることで、リンク一発で試すことができます！（ただし24時間でリンク切れになるから最後はちゃんとサーバーにアップしてね）

右下の Download から、サンプルhtml や CSS やフォントファイル一式がダウンロードできますよ〜😇

スクリーンショット 251

webフォントを実装してみよう！

デフォのコードをみてみましょう〜

html 側ではこんな感じ！

<span class="icon-maps-pin"></span>

CSS側ではこんな感じ！

@font-face {
 font-family: 'icomoon';
 src:  url('fonts/icomoon.eot?c9l0da');
 src:  url('fonts/icomoon.eot?c9l0da#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?c9l0da') format('truetype'),
   url('fonts/icomoon.woff?c9l0da') format('woff'),
   url('fonts/icomoon.svg?c9l0da#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.icon-maps-pin:before {
 content: "\e900";
}
.icon-shipment-upload:before {
 content: "\e901";
}
/* 以下略 */

ですが、私的には html の方は

<a href="#" target="_blank" rel="noopener">
    <span class="icon-maps-pin" role="presentation"></span> 地図をみる
</a>

という風に「role="presentation"」をつけています。。
WAI-ARIA（ウェイ・アリア） のお作法で、「これは飾りだよ〜 意味ないからスルーしてね」とブラウザに指示を出すことができます。
目の見えない人が使うスクリーンリーダーやサイトを読み上げてくれる VoiceOver 機能では、role="presentation" が付いている画像や要素は読み上げられません。

参考:  HTML: アクセシビリティの基礎 - ウェブ開発を学ぶ | MDN

逆に、アイコンに意味を持たせている場合は、

<a href="#" target="_blank" rel="noopener">
    <span class="icon-maps-pin" title="地図をみる"></span>
</a>

みたいな感じでも良いかもしんないですね😇（imgタグじゃないからalt属性ではないことに注意）

また、CSSの方ですが、

speak: none;

というプロパティが入っています。
speak プロパティは、スクリーンリーダーでは読み上げないでね…的な意味があったふる〜い CSS です（CSS2.1で削除）。

てな訳で、Sass とかで書いてる場合、コンパイルするときに「そんなCSSないよ！」とエラーを吐かれてしまいます笑
だから消しちゃって良いんじゃないかな〜と個人的には思います。
role="presentation" があるんだし。
（speak には対応していて role="presentaion" に対応してないブラウザとかある可能性もわずかにあるな…🤔 ）

と、後半が長くなったけど、そーゆーわけで Streamline Icons と IcoMoon の紹介でした〜！またね👋

きになったことは Twitter まで💪✨

この記事が気に入ったらサポートをしてみませんか？