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;
}