Download last icon - last icon Quellcode Download

last icon

Schriftarten herunterladen

2.2.0

Herunterladen

Last-Icon

Die letzte Icon -Bibliothek werden Sie jemals benötigen.

Schlüsselmerkmale:

Laden Sie als SVG- oder Schriftsymbole
Mix & Match -Symbolsätze bei Bedarf mischen
Bringen Sie Ihre eigenen Ikonen mit
Ikontenschaften reparieren
Lazy laden Sie Ihre Symbole

Wie man benutzt

Fügen Sie einfach die Bibliothek ein

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

Hinweis: Es wird empfohlen, dies so früh wie möglich zu definieren, damit alle Symbole so bald wie möglich gelöst werden. Andernfalls sehen Sie möglicherweise eine Verzögerung, bevor Ihre Symbole angezeigt werden. Auch wenn Sie dies tun, sehen Sie möglicherweise immer noch eine sehr kleine Verzögerung im Gegensatz zu einer Schriftzone oder einem eingebetteten SVG.

Wenn Sie mit etwas mehr Verzögerung in Ordnung sind, können Sie dies stattdessen verwenden (was auf Browsern ignoriert wird, die Module nicht unterstützen):

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

Und rufen Sie Ihre Symbole an!

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

Das folgende CSS wird empfohlen:

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

Konfigurieren

Sie können alle Optionen mit LastIcon.configure festlegen. Der empfohlene Weg, dies anzurufen, ist so:

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

Alle verfügbaren Optionen:

Name	Typ	Beschreibung
debuggen	`Boolean`	Sollten wir Nachrichten an die Konsole ausgeben
faul	`Boolean`	Laste ikonen faul
Ersatzname	`Object`	Ersetzen Sie die Symbole transparent durch andere Werte
Schriftarten	`Array`	Symbolsätze mit Schriftarten anstelle von SVG -Iconen und nicht mit SVG
Standardset	`String`	Standardsymbol gesetzt
Sets	`Object.<string, IconSet>`	Verfügbare Ikonen

Unterstützte Symbolsätze

Icon Set	Name	Alias	Typen	Schlaganfall	Zählen	Webseite
Bootstrap -Symbole	Bootstrap	BS	1	X	1800+	Bootstrap
Flaggen	Flaggen	fl	1	X	?	Flaggen
FontaWesome	fontaWesome	Fa	5	X	1600+	fontaWesome
Ikonoir	Ikonoir	In	1	X	1600+	Ikonoir
Iconpark	Iconpark	IP	4	v	2400+	Iconpark
Lucide	Lucide	Lu	1	v	1800+	Lucide
Materialikons	Material	mi	5	X	1100+	Materialikonen
Phosphor	Phosphor	pH	6	X	9000+	Phosphor
Super winzige Ikonen	Supertiny	st	1	X	386	Supertiny
Materialsymbole	Symbole	MS	3	v	2500+	Materialsymbole
Tabler -Symbole	Tabler	ti	1	v	5700+	Tabler

Hinzufügen oder Aktualisieren eines Symbolsatzes

Sie können jede Option für ein Symbolsatz aktualisieren

Name	Typ	Beschreibung
alias	`String`	Kurze zwei Buchstaben alias
SvgPath	`function`	Der SVG -Pfad
[Fixfill]	`Boolean`	Bedarf dieser Set repariert `fill:currentColor` ?
[Usestroke]	`String`	Fügen Sie SVG einen Schlaganfall hinzu
[Standardstroke]	`String`	Verwendungshub (falls unterstützt der Schlaganfall)
[defaultType]	`String`	Standardtyp zu verwenden (wenn mehrere Typen vorhanden sind)
[Präfixe]	`Object.<string, string>`	Typen zu Präfixen
[Schriftklasse]	`function`	Schriftklasse
[Opticalfont]	`Boolean`	Ist eine optische Schriftart?
[Name]	`String`	Vollständiger Name (automatisch injiziert)

Füllen

Einige Symbolsätze enthalten eine Standard fill="currentColor" und andere nicht. Um alle Symbolsätze konsequent verhalten zu lassen, wenden wir ein fill="currentColor" auf alle Symbolsätze an. Diese Korrektur gilt: "Material", "fontAwesome".

Warum ein benutzerdefiniertes Element

Externe Sprite oder Schriftart laden alle Symbole, die zu einer zusätzlichen Ladezeit führen
Einschließlich SVG führt zu wirklich super langem HTML und nicht sehr entwicklerfreundlich
Es ist nicht erforderlich, einen maßgefertigten JS -Inliner zu erhalten, sondern fühlt sich insgesamt sauberer an

Warum externe CSS

Ein benutzerdefiniertes Element CSS wird erst geladen, wenn die Komponente selbst geladen ist. Dies kann zu Fouc und Dingen führen, die sich bewegen, wenn sich das Symbol erscheint. Die Lösung, die ich bisher gefunden habe, besteht darin, einige globale CSS -Regeln anzuwenden, als vor dem Laden der Komponente bekannt ist.

Sie können alle zusätzlichen SCSs überprüfen, die auch für Sie nützlich sind.

Schriftarten verwenden

Manchmal ist es einfacher, eine Symbolschrift zu verwenden. In der Tat wird es vom Browser vollständig zwischengespeichert und hat keinen Display -Fehler. Offensichtlich ist der Nachteil, dass Sie die gesamte Schriftart laden müssen, aber nach der ersten Last zwischengespeichert wird. Der Vorteil der Verwendung von Lasticon gegenüber regulären Symbolen besteht darin, dass Sie leicht zwischen die eine oder andere Weise wechseln können.

Laden Sie zunächst einen relevanten Schriftartenstil

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

Und danach verwenden Sie die Schriftkonfiguration, um das letzte Symbol mit der Schriftart über die SVG -Symbole zu verwenden

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

Und dann aktualisieren Sie Ihre Stile:

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