TeenyIconsを使って、ブログをスマートな雰囲気にする。
2020-08-15
こんにちは、0371です。
ブログで使っているTeenyIcons
の紹介記事です。
このアイコンは、Tiny minimal 1px icons
というキャッチコピーの通り、とてもミニマルですっきりとしています。
そのため、シンプルなサイトとの相性がとても良く、このブログでも採用させていただきました。
どんな感じ?
- フォーマットは
SVG
icon
の種類は約500×2MIT ライセンス
使い方
公式のサイトにいきます。
TeenyIcons
https://teenyicons.com/
その中で、使いたいアイコンをクリックするだけで、クリップボードにコピーできます。
あとはソースコードに直貼りし、使用しています。
実際にペーストして整形すると、だいたい以下のようになっているはずです。
<svg
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12">
<path
d="M.5 12.5v-10a1 1 0 011-1h4l2 2h6a1 1 0 011 1v8a1 1 0 01-1 1h-12a1 1 0 01-1-1z"
stroke="currentColor"
>
</path>
</svg>
stroke="currentColor"
と指定することで、文字色をCSSで指定することができます。
アイコンの大きさは、viewBox
と width , height
を調整するといいでしょう。
MIT ライセンス
なので、使用する際にはプロジェクトのどこかに以下の文面を明記しましょう。
自分はブログ内のページに明記していますが、ソースコードの中にコメントとして記載してもOKです。
ライセンスのURL
は変更される可能性がありますので、その都度確認してください。
Copyright (c) 2020, Anja van Staden
Released under the MIT license
https://github.com/teenyicons/teenyicons/blob/master/LICENSE
感想
線が細いからお気に入りです。
俺の体型も細くしてほしい(?)