画像ファイル1を含まずに[WSM]Webサイトにアイコンをインポート

10752 ワード
テキストリンク

feather_icon


アイコンをSVGに変換!画像ファイルを読み込む必要はありません.
羽状体で便利に持ってきてくれます.
-[正式]使用方法
https://github.com/feathericons/feather#feather

公式githubからのコード

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

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

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

1. CDN Provider

<script src="https://unpkg.com/feather-icons"></script>
ヘッダファイルセクションでは、次のスクリプトを作成します.

2. Use

 <i data-feather="circle"></i>
これによりbodyは上記のタグと属性を使用することができる.

アイコンの形に応じて、属性名をそっくりに書きます.
-アイコン検索サイト
https://feathericons.com/

3. Replace

<script>
   feather.replace()
</script>
scriptラベルにreplaceメソッドを使用する必要があります.
このスクリプトはsvgをマークするコードです.
出力画面のソースコードを見ると分かりやすいです.


iラベルがsvgラベルと表記されている様子.

例)

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>
    <h1>Feather icons</h1>
    <i data-feather="circle"></i>
    <i data-feather="archive"></i>
    <i data-feather="menu"></i>
    <i data-feather="search"></i>
    <!-- example icon -->
    <script>
      feather.replace();
    </script>
  </body>
</html>
上のコードの出力画面
myEclipseレジストリコードジェネレータ
TIL 03 l JavaScript