Javascript

【Javascript】美しいオープンソースアイコンFeather

March 9, 2018
feather

Featherはオープンソースのアイコンコレクションです。各アイコンは、シンプルさ、一貫性、可読性を重視して24×24グリッド上にデザインされています。

Quick Start

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Include

feather.jsもしくはfeather.min.jsを含める。

<script src="path/to/dist/feather.js"></script>

CDN

<!-- choose one -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>

Use

data-feather要素に使用したいアイコン名を追加する。

<i data-feather="circle"></i>

Replace

feather.replace()メソッドを呼び出します。

<script>
  feather.replace()
</script>

MIT