last icon Download - last icon Code Source Téléchargement

last icon

Téléchargement de polices

2.2.0

Télécharger

dernier instant

La dernière bibliothèque d'icônes dont vous aurez besoin.

Caractéristiques clés:

Chargez en tant que SVG ou icônes de police
Ensembles d'icônes de mélange et de correspondance si nécessaire
Apportez vos propres icônes
Correction des iconsistences
Lazy Chargez vos icônes

Comment utiliser

Incluez simplement la bibliothèque

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

Remarque: il est recommandé de définir cela le plus tôt possible afin que toutes les icônes soient résolues dès que possible. Sinon, vous pourriez voir un retard avant que vos icônes ne soient affichées. Même en faisant cela, vous pourriez toujours voir un très petit retard plutôt qu'une icône de police ou un SVG intégré.

Si vous êtes d'accord avec un peu plus de retard, vous pouvez l'utiliser à la place (qui sera ignoré sur les navigateurs qui ne prennent pas en charge les modules):

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

Et appelez vos icônes!

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

Le CSS suivant est recommandé:

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

Configuration

Vous pouvez définir toutes les options à l'aide de LastIcon.configure . La façon recommandée de l'appeler est cette façon:

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

Toutes les options disponibles:

Nom	Taper	Description
déboguer	`Boolean`	Devrions-nous publier des messages à la console
paresseux	`Boolean`	Chargez les icônes paresseusement
remplaçage	`Object`	Remplacer transparent les icônes par d'autres valeurs
polices	`Array`	Ensembles d'icônes utilisant des icônes de police plutôt que SVG
défaut	`String`	Ensemble d'icônes par défaut
sets	`Object.<string, IconSet>`	ICONSEZ DES ICONSEURS

Ensembles d'icônes prises en charge

Ensemble d'icônes	Nom	Alias	Types	Accident vasculaire cérébral	Compter	Site web
Icônes bootstrap	amorce	bs	1	x	1800+	amorce
Drapeaux	drapeaux	FL	1	x	?	drapeaux
Fontawesome	Fontawesome	fa	5	x	1600+	Fontawesome
Iconoir	iconoir	dans	1	x	1600+	iconoir
Iconpark	iconpark	IP	4	V	2400+	iconpark
Luciser	luciser	Lu	1	V	1800+	luciser
Icônes de matériaux	matériel	mi	5	x	1100+	icônes de matériau
Phosphore	phosphore	pH	6	x	9000+	phosphore
Icônes super petites	supertin	St	1	x	386	supertin
Symboles de matériaux	symboles	MS	3	V	2500+	symboles matériels
Icônes de tableur	tableur	ti	1	V	5700+	tableur

Ajout ou mise à jour d'un ensemble d'icônes

Vous pouvez mettre à jour n'importe quelle option pour un ensemble d'icônes

Nom	Taper	Description
alias	`String`	Two-lettres courtes alias
svgpath	`function`	Le chemin SVG
[FixFill]	`Boolean`	Cet ensemble doit-il réparer `fill:currentColor` ?
[USESTROKE]	`String`	Ajouter une course à SVG
[DefaultStroke]	`String`	Un coup par défaut à l'utilisation (si prend en charge la course)
[defaultType]	`String`	Type par défaut à utiliser (lorsqu'il existe plusieurs types)
[Prefixes]	`Object.<string, string>`	Types à préfixer
[FontClass]	`function`	Classe de polices
[opticalfont]	`Boolean`	Est une police optique?
[nom]	`String`	Nom complet (injecté automatiquement)

Remplir

Certains ensembles d'icônes incluent un fill="currentColor" et d'autres non. Pour que tous les ensembles d'icônes se comportent de manière cohérente, nous appliquons un fill="currentColor" à tous les ensembles d'icônes. Ce correctif s'applique à: «Matériel», «Fontawesome».

Pourquoi un élément personnalisé

Le sprite ou la police externe charge toutes les icônes qui conduisent à un temps de chargement supplémentaire
Y compris SVG mène à un HTML vraiment très long et pas très convivial pour les développeurs
Pas besoin de JS Inliner personnalisé, il est plus propre dans l'ensemble

Pourquoi CSS externe

Un élément personnalisé CSS n'est pas chargé tant que le composant lui-même est chargé, ce qui peut conduire à FOUC et que les choses se déplacent lorsque l'icône apparaît. La solution que j'ai trouvée jusqu'à présent est d'appliquer certaines règles CSS globales que celles connues avant le chargement du composant.

Vous pouvez également vérifier tous les SCS supplémentaires qui pourraient vous être utiles.

En utilisant des polices

Parfois, il est plus facile d'utiliser une police d'icône. En effet, il est entièrement mis en cache par le navigateur et n'aura aucun problème d'affichage. De toute évidence, l'inconvénient est que vous devez charger toute la police, mais il est mis en cache après la première charge. L'avantage de l'utilisation de Lasticon sur des icônes réguliers est qui vous permet de basculer facilement entre une manière ou l'autre.

Tout d'abord, chargez tout style de polices pertinentes

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

Et après cela, utilisez la configuration de la police pour dire à la dernière icône pour utiliser la police sur les icônes SVG

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

Et puis, mettez à jour vos styles:

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