<u1-ico> - element

Universal icon-element

Features

• Use any icon set you want
• You can put direct SVG inside the element
• You can use a icon-font
• Or you define a directory, where the svg-files are located

Usage

<u1-ico icon="book">Alt text</u1-ico>
<u1-ico>star</u1-ico>

u1-ico {
    --u1-ico-dir: 'https://cdn.jsdelivr.net/npm/[email protected]/icons/';
    color:darkblue;
    font-size:2rem;
}

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/ico.min.css" rel=stylesheet>
<script src="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/ico.min.js" type=module></script>

Demos

emojis.html
fonts.html
ico-directory.html
minimal.html
test.html

Variant "icon-directory"

Use the css-property --u1-ico-dir:https://x.y/icons-directory/ to define where the icons are located.
The value must be in quotes.

Placeholder "{icon}"

If the icon is not located at the end of the path (https://x.y/star.svg), you can use this placeholder:

html {
    --u1-ico-dir:'https://x.y/24x-{icon}/baseline.svg';
}

Icon-naming

We prefer to alwas use lowercase names for the icons and use the - as a separator. E.g. arrow-right.
But if your prefered Icon-Set uses other naming conventions, you can use the placeholder {icon-name} in the same form as the Iconset's files are named:
{iconName} => first word is lowercase, second word is uppercase and there is no separator.

html {
    --u1-ico-dir:'https://cdn.jsdelivr.net/npm/@adobe/[email protected]/24/{IconName}';
}

Some icon sets

See it in action: ico-directory.html

Icon set	Directory
Material	https://cdn.jsdelivr.net/npm/@material-icons/[email protected]/svg/{icon_name}/baseline.svg
Teenyicons	https://cdn.jsdelivr.net/npm/[email protected]/outline/
Feather	https://cdn.jsdelivr.net/npm/[email protected]/dist/icons/
Bootstrap	https://cdn.jsdelivr.net/npm/[email protected]/icons/
Octicons	https://cdn.jsdelivr.net/npm/[email protected]/build/svg/
Bytesize	https://cdn.jsdelivr.net/npm/[email protected]/dist/icons/
Ionicons	https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/
Tabler Icons	https://cdn.jsdelivr.net/npm/[email protected]/icons/
Fontawesome regular	https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/regular/
Fontawesome solid	https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/
Fontawesome brands	https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/brands/
Dripicons	https://cdn.jsdelivr.net/npm/[email protected]/SVG/
CoreUI Icons	https://cdn.jsdelivr.net/npm/@coreui/[email protected]/svg/free/cil-
open-iconic	https://cdn.jsdelivr.net/npm/[email protected]/svg/
Radix	https://cdn.jsdelivr.net/gh/radix-ui/[email protected]/packages/radix-icons/icons/15/
Heroicons outline	https://cdn.jsdelivr.net/npm/[email protected]/outline/
Heroicons solid	https://cdn.jsdelivr.net/npm/[email protected]/solid/
Typicons	https://cdn.jsdelivr.net/npm/[email protected]/src/svg/
Boxicons regular	https://cdn.jsdelivr.net/npm/[email protected]/svg/regular/bx-
Boxicons solid	https://cdn.jsdelivr.net/npm/[email protected]/svg/solid/bxs-
linearicons	https://cdn.jsdelivr.net/npm/[email protected]/dist/svg/
FluentUI regular	https://cdn.jsdelivr.net/npm/@svg-icons/[email protected]/
FluentUI filled	https://cdn.jsdelivr.net/npm/@svg-icons/[email protected]/
Evil Icons	https://cdn.jsdelivr.net/npm/[email protected]/assets/icons/ei-
Eva Icons fill	https://cdn.jsdelivr.net/npm/[email protected]/fill/svg/
Eva Icons outline	https://cdn.jsdelivr.net/npm/[email protected]/outline/svg/{icon}-outline.svg
Zondicons	https://cdn.jsdelivr.net/npm/[email protected]/
holasvg-icons	https://cdn.jsdelivr.net/gh/marianabeldi/holasvg-icons/icons/
Jam icons	https://cdn.jsdelivr.net/gh/michaelampr/[email protected]/icons/
entypo	https://cdn.jsdelivr.net/npm/[email protected]/src/Entypo/
Adobe Spectrum	https://cdn.jsdelivr.net/npm/@adobe/[email protected]/24/{IconName}.svg
mono icons	https://cdn.jsdelivr.net/npm/[email protected]/svg/
line awesome	https://cdn.jsdelivr.net/npm/[email protected]/svg/
flat color icons	https://cdn.jsdelivr.net/npm/[email protected]/svg/
icons8 windows-10-icons	https://cdn.jsdelivr.net/npm/[email protected]/svg/production/{icon_name}.svg
fticons	https://cdn.jsdelivr.net/npm/@financial-times/[email protected]/svg/
photon icons	https://cdn.jsdelivr.net/npm/[email protected]/icons/desktop/
devicons	https://cdn.jsdelivr.net/npm/[email protected]/!SVG/{icon_name}
Figma UI Icons	https://cdn.jsdelivr.net/npm/[email protected]/icons/svg/
ifolio licons	https://cdn.jsdelivr.net/gh/ifolio/licons@master/svg/

Variant "icon-font":

Define the font used for the icons:

@font-face {
    font-family: 'my icon font';
    font-style: normal;
    font-weight: 400;
    src: url(my-icon-font.woff2) format('woff2');
}
html {
    --u1-ico-font:'my icon font';
}

Note: --u1-ico-dir is stronger then --u1-ico-font.

Variant "SVG":

Just put you svg inside the element:

<u1-ico><svg>...</svg></u1-ico>

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥