last icon下載 - last icon源代碼下載

last icon

字體下載

2.2.0

下載

最後一個

您將需要的最後一個圖標庫。

關鍵功能：

加載為SVG或字體圖標
如果需要，請混合與匹配圖標集
帶上自己的圖標
修復圖標固定
懶惰加載圖標

如何使用

只需包含庫

 < 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`	懶洋洋地加載圖標
替換名稱	`Object`	用其他值透明地替換圖標
字體	`Array`	使用字體圖標而不是SVG設置圖標集
默認設置	`String`	默認圖標集
套	`Object.<string, IconSet>`	可用的圖標

支持的圖標集

圖標集	姓名	別名	類型	中風	數數	網站
引導圖標	引導程序	BS	1	x	1800+	引導程序
標誌	標誌	佛羅里達州	1	x	？	標誌
fontawesome	fontawesome	fa	5	x	1600+	fontawesome
Iconoir	Iconoir	在	1	x	1600+	Iconoir
圖示	圖示	IP	4	v	2400+	圖示
盧西德	盧西德	魯	1	v	1800+	盧西德
材料圖標	材料	mi	5	x	1100+	物質圖標
磷	磷	ph	6	x	9000+	磷
超級小圖標	超文	英石	1	x	386	超文
材料符號	符號	多發性硬化症	3	v	2500+	物質符號
表圖標	表格	ti	1	v	5700+	表格

添加或更新圖標集

您可以更新圖標集的任何選項

姓名	類型	描述
別名	`String`	短兩個字母別名
SVGPATH	`function`	SVG路徑
[FIXFILL]	`Boolean`	這集需要修復`fill:currentColor`嗎？
[usestroke]	`String`	將中風添加到SVG
[DefaultStroks]	`String`	使用默認的中風（如果支持中風）
[DefaultType]	`String`	默認類型要使用（有多種類型時）
[前綴]	`Object.<string, string>`	前綴類型
[FontClass]	`function`	字體類
[opticalFont]	`Boolean`	是光學字體嗎？
[姓名]	`String`	全名（自動注入）

充滿

某些圖標集包括默認fill="currentColor" ，有些則不包括。為了使所有圖標集的行為始終如一，我們將fill="currentColor"應用於所有圖標集。此修復程序適用於：“材料”，“ fontawesome”。

為什麼自定義元素

外部精靈或字體正在加載所有導致額外加載時間的圖標
包括SVG（包括SVG）導致非常長的HTML，並且不是很友好的開發人員
無需自定義JS Inliner，總體上感覺更乾淨

為什麼外部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 " />

之後，使用字體配置告訴Last圖標在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;
}