last icon Descargar - Descargar el código fuente last icon

last icon

Descarga de fuentes

2.2.0

Descargar

ícono último

La última biblioteca de iconos que necesitará.

Características clave:

Cargar como SVG o iconos de fuentes
Conjuntos de iconos de mezcla y combinación si es necesario
Trae tus propios íconos
Arreglar iconsistencias
Perlo carga tus íconos

Cómo usar

Simplemente incluya la biblioteca

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

Nota: Se recomienda definir esto lo antes posible para que todos los iconos se resuelvan lo antes posible. De lo contrario, puede ver un retraso antes de que se muestren sus íconos. Incluso cuando se hace esto, es posible que aún vea un retraso muy pequeño en lugar de un icono de fuente o un SVG incrustado.

Si está bien con un poco más de retraso, puede usar esto en su lugar (que se ignorará en los navegadores que no admiten 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 >

¡Y llame a sus íconos!

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

Se recomienda el siguiente 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 ;
}

Configuración

Puede establecer cualquier opción usando LastIcon.configure . La forma recomendada de llamarlo es así:

 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 las opciones disponibles:

Nombre	Tipo	Descripción
depurar	`Boolean`	¿Deberíamos emitir mensajes a la consola?
perezoso	`Boolean`	Cargar íconos perezosamente
nombre de reemplazo	`Object`	Reemplazar transparentemente íconos con otros valores
fuentes	`Array`	Conjuntos de iconos usando iconos de fuentes en lugar de SVG
predeterminado	`String`	Conjunto de icono predeterminado
sets	`Object.<string, IconSet>`	Iconsets disponibles

Conjuntos de iconos compatibles

Conjunto de iconos	Nombre	Alias	Tipos	Ataque	Contar	Sitio web
Íconos de arranque	oreja	bs	1	incógnita	1800+	oreja
Banderas	banderas	Florida	1	incógnita	?	banderas
Avenida	avenida	fa	5	incógnita	1600+	avenida
Iconoir	iconoir	en	1	incógnita	1600+	iconoir
Parque iconal	parque iconal	IP	4	V	2400+	parque iconal
Lucide	lucide	Lu	1	V	1800+	lucide
Íconos de materiales	material	mi	5	incógnita	1100+	íconos de material
Fósforo	fósforo	ph	6	incógnita	9000+	fósforo
Iconos súper pequeños	supertinio	calle	1	incógnita	386	supertinio
Símbolos de materiales	símbolo	EM	3	V	2500+	símbolos de material
Íconos de tablas	taquería	Ti	1	V	5700+	taquería

Agregar o actualizar un conjunto de iconos

Puede actualizar cualquier opción para un conjunto de iconos

Nombre	Tipo	Descripción
alias	`String`	Alias de dos letras cortas
svgpath	`function`	La ruta SVG
[FixFill]	`Boolean`	¿Este conjunto necesita arreglar `fill:currentColor` ?
[Usestroke]	`String`	Agregar accidente cerebrovascular a SVG
[Defaultstroke]	`String`	Accidente cerebrovascular predeterminado para usar (si es compatible con el trazo)
[defaultType]	`String`	Tipo predeterminado para usar (cuando hay múltiples tipos)
[prefijos]	`Object.<string, string>`	Tipos de prefijos
[FontClass]	`function`	Clase de fuente
[OpticalFont]	`Boolean`	¿Es una fuente óptica?
[nombre]	`String`	Nombre completo (inyectado automáticamente)

Llenar

Algunos conjuntos de iconos incluyen un fill="currentColor" y otros no. Para que todos los conjuntos de iconos se comporten de manera consistente, aplicamos un fill="currentColor" a todos los conjuntos de iconos. Esta solución se aplica a: 'Material', 'Fontawawesome'.

Por qué un elemento personalizado

Sprite o fuente externos está cargando todos los iconos que conducen a un tiempo de carga adicional
Incluir SVG está conduciendo a HTML realmente súper largo y no muy amigable para los desarrolladores
No hay necesidad de JS Inliner personalizado, se siente más limpio en general

Por qué CSS externo

Un elemento personalizado CSS no se carga hasta que el componente en sí se carga, lo que puede conducir a Fouc y cosas que se mueven a medida que aparece el icono. La solución que he encontrado hasta ahora es aplicar algunas reglas CSS globales que las conocidas antes de cargar el componente.

Puede verificar cualquier SCS adicional que pueda ser útil para usted también.

Usando fuentes

A veces es más fácil usar una fuente de icono. De hecho, el navegador está completamente almacenado en caché y no tendrá ningún problema de falla. Obviamente, el inconveniente es que tienes que cargar toda la fuente, pero está en caché después de la primera carga. La ventaja de usar Lasticon sobre iconos regulares es que le permite cambiar fácilmente entre una forma u otra.

En primer lugar, cargue cualquier estilo de fuentes 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 " />

Y después de eso, use la configuración de fuentes para decirle al último icono que use la fuente sobre los iconos SVG

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

Y luego, actualice sus 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;
}