TeenyIconsを使って、ブログをスマートな雰囲気にする。

2020-08-15

こんにちは、0371です。

ブログで使っているTeenyIconsの紹介記事です。

このアイコンは、Tiny minimal 1px iconsというキャッチコピーの通り、とてもミニマルですっきりとしています。

そのため、シンプルなサイトとの相性がとても良く、このブログでも採用させていただきました。

どんな感じ？

1. フォーマットはSVG
2. iconの種類は約500×2
3. MIT ライセンス

使い方

公式のサイトにいきます。

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

感想

線が細いからお気に入りです。
俺の体型も細くしてほしい（？）