last icon - Ícone do Download do código -fonte last icon

last icon

Baixar fonte

2.2.0

Baixar

Last-icon

A última biblioteca de ícones que você precisará.

Principais recursos:

Carregue como ícones SVG ou fonte
Conjuntos de ícones Mix & Match, se necessário
Traga seus próprios ícones
Corrigir iconsistências
Carregar preguiçosos seus ícones

Como usar

Basta incluir a biblioteca

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

Nota: Recomenda -se definir isso o mais cedo possível, para que todos os ícones sejam resolvidos o mais rápido possível. Caso contrário, você poderá ver um atraso antes que seus ícones estejam sendo exibidos. Mesmo ao fazer isso, você ainda pode ver um atraso muito pequeno, em oposição como um ícone de fonte ou um SVG incorporado.

Se você estiver bem com um pouco mais de atraso, pode usar isso (que será ignorado nos navegadores que não suportam módulos):

 <!-- 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 >

E chame seus ícones!

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

O seguinte CSS é recomendado:

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

Configurando

Você pode definir quaisquer opções usando LastIcon.configure . A maneira recomendada de chamá -lo é desta maneira:

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

Todas as opções disponíveis:

Nome	Tipo	Descrição
depurar	`Boolean`	Devemos gerar mensagens para console
preguiçoso	`Boolean`	Carregue os ícones preguiçosamente
Splacename	`Object`	Substitua transparentemente os ícones por outros valores
fontes	`Array`	Conjuntos de ícones usando ícones de fontes em vez de svg
DefaultSet	`String`	Conjunto de ícone padrão
conjuntos	`Object.<string, IconSet>`	Iconsetes disponíveis

Conjuntos de ícones suportados

Conjunto de ícones	Nome	Alias	Tipos	AVC	Contar	Site
Ícones de bootstrap	Bootstrap	bs	1	x	1800+	Bootstrap
Bandeiras	bandeiras	fl	1	x	?	bandeiras
Fontawesome	Fontawesome	fa	5	x	1600+	Fontawesome
Iconoir	Iconoir	em	1	x	1600+	Iconoir
ICONPARK	ICONPARK	IP	4	v	2400+	ICONPARK
Lucide	Lucide	Lu	1	v	1800+	Lucide
Ícones de materiais	material	mi	5	x	1100+	ícones materiais
Fósforo	fósforo	ph	6	x	9000+	fósforo
Ícones super minúsculos	Supertiny	st	1	x	386	Supertiny
Símbolos de materiais	símbolos	EM	3	v	2500+	símbolos materiais
Ícones de Tabler	Tabler	ti	1	v	5700+	Tabler

Adicionando ou atualizando um conjunto de ícones

Você pode atualizar qualquer opção para um conjunto de ícones

Nome	Tipo	Descrição
Alias	`String`	Alias curtas de duas letras
svgpath	`function`	O caminho SVG
[FixFill]	`Boolean`	Esse conjunto precisa de fixação de `fill:currentColor` ?
[usestroke]	`String`	Adicione AVC ao SVG
[Defaultstroke]	`String`	AVC padrão para usar (se suportar AVC)
[DefaultType]	`String`	Tipo padrão a ser usado (quando houver vários tipos)
[Prefixos]	`Object.<string, string>`	Tipos a prefixos
[fontclass]	`function`	Classe de fonte
[OpticalFont]	`Boolean`	É uma fonte óptica?
[nome]	`String`	Nome completo (injetado automaticamente)

Preencher

Alguns conjuntos de ícones incluem um fill="currentColor" e outros não. Para que todos os conjuntos de ícones se comportem de forma consistente, aplicamos um fill="currentColor" a todos os conjuntos de ícones. Essa correção se aplica a: 'Material', 'Fontawesome'.

Por que um elemento personalizado

Sprite ou fonte externa está carregando todos os ícones que levam ao tempo de carregamento extra
A inclusão de SVG está levando a HTML realmente super longa e não muito amigável para desenvolvedores
Não há necessidade de js personalizados, parece mais limpo em geral

Por que CSS externo

Um CSS de elemento personalizado não é carregado até que o próprio componente seja carregado, o que pode levar ao FOUC e às coisas se movendo à medida que o ícone aparece. A solução que encontrei até agora é aplicar algumas regras Globais de CSS do que serem conhecidas antes que o componente seja carregado.

Você pode verificar qualquer SCSS extra que possa ser útil para você também.

Usando fontes

Às vezes é mais fácil usar uma fonte de ícone. De fato, é totalmente armazenado em cache pelo navegador e não terá nenhuma falha de exibição. Obviamente, a desvantagem é que você precisa carregar toda a fonte, mas está em cache após a primeira carga. A vantagem de usar o Laticon sobre os ícones regulares é que você permite que você mude facilmente entre uma maneira ou a outra.

Primeiro de tudo, carregue qualquer estilo de fontes relevantes

 < 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 " />

E depois disso, use a configuração da fonte para informar o último ícone para usar a fonte sobre os ícones SVG

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

E então, atualize seus estilos:

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