last iconのダウンロード - last iconソースコードのダウンロード

last icon

フォントのダウンロード

2.2.0

ダウンロード

最後のアイコン

必要な最後のアイコンライブラリ。

主な機能：

SVGまたはフォントアイコンとしてロードします
必要に応じて、アイコンセットを組み合わせて一致させます
独自のアイコンを持参してください
象徴性を修正します
怠zyなアイコンをロードします

使い方

ライブラリを含めるだけです

 < script src =" last-icon.js " > </ script >

注：すべてのアイコンができるだけ早く解決されるように、できるだけ早くこれを定義することをお勧めします。それ以外の場合は、アイコンが表示される前に遅延が表示される場合があります。これを行う場合でも、フォントアイコンや埋め込みSVGとは対照的に、非常に小さな遅延が表示される場合があります。

もう少し遅延がある場合は、代わりにこれを使用できます（モジュールをサポートしていないブラウザでは無視されます）：

 <!-- preload helps displaying things as early as possible, doesn't work in firefox and safari -->
< link rel =" modulepreload " href =" last-icon.js " />
< script type =" module " src =" ./last-icon.js " > </ script >

そして、あなたのアイコンに電話してください！

 < l-i name =" star " > </ l-i >
< l-i name =" star " set =" tb " > </ l-i >
< l-i name =" star " size =" 32 " set =" tb " > </ l-i >

< l-i name =" star " set =" bx " type =" solid " > </ l-i >
< l-i name =" star " set =" bx " type =" regular " > </ l-i >
< l-i name =" github " set =" bx " type =" logos " > </ l-i >

次のCSSが推奨されます。

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;
}
l-i svg {
  display : block;
  width : 100 % ;
  height : 100 % ;
}
p l-i ,
button l-i ,
a l-i ,
span l-i {
  vertical-align : -0.125 em ;
}

構成

LastIcon.configureを使用してオプションを設定できます。それを呼び出すための推奨される方法はこの方法です：

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    // Transform stars to trash
    // replaceName: {
    //   star: "trash"
    // },
    // Use font icon
    // fonts: [
    //   "material",
    //   "phosphor",
    // ],
    // Change default set
    defaultSet : "tabler" ,
    // Change default stroke
    // defaultStroke: 1,
  } ) ;
} ) ;

利用可能なすべてのオプション：

名前	タイプ	説明
デバッグ	`Boolean`	メッセージをコンソールに出力する必要があります
怠け者	`Boolean`	アイコンを怠lazにロードします
交換用	`Object`	アイコンを他の値に透過的に置き換えます
フォント	`Array`	ICONは、SVGではなくフォントアイコンを使用して設定します
デフォルトセット	`String`	デフォルトのアイコンセット
セット	`Object.<string, IconSet>`	利用可能なアイコンセット

サポートされているアイコンセット

アイコンセット	名前	エイリアス	種類	脳卒中	カウント	Webサイト
ブートストラップアイコン	ブートストラップ	BS	1	x	1800+	ブートストラップ
フラグ	フラグ	FL	1	x	？	フラグ
フォンテソン	フォンテソン	FA	5	x	1600+	フォンテソン
Iconoir	Iconoir	で	1	x	1600+	Iconoir
ICONPARK	ICONPARK	IP	4	v	2400+	ICONPARK
ルシド	ルシド	lu	1	v	1800+	ルシド
材料アイコン	材料	mi	5	x	1100+	マテリアルアイコン
蛍光体	蛍光体	ph	6	x	9000+	蛍光体
超小さなアイコン	スーパータイニー	st	1	x	386	スーパータイニー
材料記号	シンボル	MS	3	v	2500+	マテリアルシンボル
タブラーアイコン	テーパー	ti	1	v	5700+	テーパー

アイコンセットの追加または更新

アイコンセットのオプションを更新できます

名前	タイプ	説明
エイリアス	`String`	短い2文字のエイリアス
svgpath	`function`	SVGパス
[FixFill]	`Boolean`	このセットは`fill:currentColor` ？
[Usestroke]	`String`	SVGにストロークを追加します
[デフォルトストローク]	`String`	使用するデフォルトのストローク（ストロークをサポートする場合）
[defaultType]	`String`	使用するデフォルトタイプ（複数のタイプがある場合）
[プレフィックス]	`Object.<string, string>`	プレフィックスへのタイプ
[fontclass]	`function`	フォントクラス
[OpticalFont]	`Boolean`	光フォントですか？
[名前]	`String`	フルネーム（自動的に注入）

埋める

一部のアイコンセットには、デフォルトのfill="currentColor"が含まれています。すべてのアイコンセットを一貫して動作させるために、すべてのアイコンセットにfill="currentColor"を適用します。この修正は、「材料」、「fontawesome」に適用されます。

カスタム要素の理由

外部スプライトまたはフォントは、余分な負荷時間につながるすべてのアイコンをロードしています
SVGを含むことは、非常に長いHTMLにつながり、開発者に優しいものではありません
カスタムJSインレーナーの必要はありません、それは全体的にきれいに感じます

なぜ外部CSS

カスタム要素CSSは、コンポーネント自体がロードされるまでロードされません。これにより、アイコンが表示されると、FOUCや動きが移動する可能性があります。私がこれまでに見つけたソリューションは、コンポーネントがロードされる前に知られているよりも、いくつかのグローバルCSSルールを適用することです。

あなたにも役立つ可能性のある追加のSCSを確認できます。

フォントを使用します

アイコンフォントを使用する方が簡単な場合があります。実際、それはブラウザによって完全にキャッシュされており、ディスプレイの不具合はありません。明らかに、欠点は、フォント全体をロードする必要があることですが、最初の負荷の後にキャッシュされます。 Lasticonを通常のアイコンで使用する利点は、いずれかの方法を簡単に切り替えることができることです。

まず、関連するフォントスタイルをロードします

 < link href =" https://fonts.googleapis.com/icon?family=Material+Icons " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Sharp " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Round " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Outlined " rel =" stylesheet " />

その後、フォント構成を使用して最後のアイコンを指示して、SVGアイコン上のフォントを使用します

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    fonts : [ "material" ] ,
    material : {
      defaultType : "two-tone" ,
    } ,
  } ) ;
} ) ;

そして、スタイルを更新してください：

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;

  svg {
    display : block;
    width : 100 % ;
    height : 100 % ;
  }
  i {
    font-size : var ( --size ) !important ;
    color : currentColor;
  }
}
p ,
button ,
a ,
span {
  l-i {
    vertical-align : -0.125 em ;
  }
}

. material-icons-two-tone {
  background-color : currentColor;
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
}