package.demo.html Maven / Gradle / Ivy
Show all versions of last-icon Show documentation
Last Icon Demo
Last Icon
One custom icon element to rule them all
Basic usage
Simply use <l-i></l-i>
Default icons
Set the name with name="your-icon" and, optionnaly, set a custom size with size="xx" (which is just a
shortcut for setting style="--size:{xx}px")
Icons are using vertical-align:middle by default and a vertical-align:0.125em offset when contained in a
p, button, a or span
Bootstrap Icons
Use set="bootstrap" or set="bs"
Box Icons
Use set="boxicons" or set="bx"
You can specify the following types: solid, regular, logos
Tabler Icons
This is the default set
Use set="tabler" or set="tb"
You can also set various widths using stroke attribute (it will NOT use the font) ! It can also be set globally with
defaultStroke.
Material Icons
Use set="material" or set="mi"
You can specify the following types: filled, outlined, round, sharp,
two-tone
You can also use the font as an icon if needed!
Material Symbols
Use set="symbols" or set="ms". Works best with font icons if you intend to use options.
Weight (note how search and star behave differently, the star becomes much smaller with lower weights)
You can specify the following types: outlined, rounded, sharp
Click to toggle fill. Note that we don't see much difference between outlined and sharp ;-)
Animate them! (only works with font icons)
Animate on hover (only works with font icons)
Dark background
Css.gg Icons
Use set="cssgg" or set="gg"
Font Awesome Icons
Use set="fontawesome" or set="fa"
Bytesized
Use set="bytesized" or set="by"
Super Tiny Icons
Use set="supertiny" or set="st"
Super useful if you need the social icons with proper colors 👌
Flags Icons
Use set="flags" or set="fl"
Emoji Icons
Use set="emojicc" or set="em"
Iconoir
Use set="iconoir" or set="in"
Stroke only works with svg
EOS
Use set="eos" or set="eo"
You can specify the following types: solid, outlined, animated
Note: we use an alternative provider as the original repository structure is not very consistent
Feather
Use set="feather" or set="ft"
You can also set various widths using stroke attribute !
Lucide
Use set="lucide" or set="lu"
You can also set various widths using stroke attribute !
IconPark
Use set="iconpark" or set="ip"
You can also set various widths using stroke attribute !
You can set 4 themes (outline, filled, two-tone, multi-color): these need to be set in CSS.
TODO: consider merging all the icons in one folder to avoid setting the type like what I did for eos icons
Phosphor
Use set="phosphor" or set="ph"
You can set 6 types (bold, duotone, fill, light, regular, thin)
Invalid icons
Invalid icons are logged to the console and display a warning emoji
Animations and transformations
Use the same icon and rotate
Use the animation classes or they -hover variant
Or use svg animation
Advanced usage
Host your own icons
You can customize or add your own iconSets.
customElements.whenDefined("l-i").then(() => {
// Access through registry
customElements.get("l-i").configure({
debug: true,
// Specify our own loading path
sets: {
bootstrap: {
svgPath: () => "./vendor/bootstrap",
}
},
});
});