icon-svg

Memoized fetch SVG icons from many popular icon sets with editor autocomplete and a Web Component ready to use

`npm i icon-svg` `pnpm add icon-svg` `yarn add icon-svg`

## Examples

# app

Try it live

# view source

```tsx /** @jsxImportSource html-vdom */ import { render } from 'html-vdom' import { IconSvg } from 'icon-svg' document.body.className = 'dark' const cssStyle = /*css*/ ` body { background: #eee; color: #222; } body.dark { background: #272727; color: #eee; } @media (prefers-color-scheme: dark) { body:not(.light) { background: #272727; color: #eee; } } ${IconSvg} { width: 32px; height: 32px; margin: 2px; stroke-width: 2.5px; } .medium ${IconSvg} { width: 24px; height: 24px; stroke-width: 1.9px; } .small ${IconSvg} { width: 16px; height: 16px; stroke-width: 1.1px; } ` const style = document.createElement('style') style.textContent = cssStyle document.head.appendChild(style) const AllSets = () => ( <> {/* */} ) render( <>

, document.body ) ```

## API

# IconSvg

# toString

# ()

() =>

string

# ()

() =>

string

# IconSvgElement

# constructor()

# new IconSvgElement()

IconSvgElement

# $

Context<IconSvgElement & JsxContext<IconSvgElement> & {

# ctor

CleanClass

# ctx

ElementWrapper

# ctx

ReactiveWrapper

__module

# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

# context

ContextClass<IconSvgElement & JsxContext<IconSvgElement> & {

# ctor

CleanClass

# ctx

ElementWrapper

# ctx

ReactiveWrapper

__module

# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

# debug

boolean

# dispatch

Dispatch<

# (name, detail, init)

# name

Event | Narrow<K, string>

# detail

# init

CustomEventInit<any>

<K, E>(name, detail, init) =>

any

# host

IconSvgElement

# icon = $.String

undefined | string

# kind = $.String

undefined | string

# onmounted

EventHandler<IconSvgElement, CustomEvent<any>>

# onunmounted

EventHandler<IconSvgElement, CustomEvent<any>>

# preventUnmount

boolean

# raw = $.Boolean

undefined | boolean

# root = ...

ShadowRoot

# set = $.String

undefined | string

# strokeWidth = $.Number

undefined | number

# type = $.String

undefined | string

# attributeChangedCallback()

attributeChangedCallback() =>

void

# created(ctx)

# ctx

Context<IconSvgElement & JsxContext<IconSvgElement> & {

# ctor

CleanClass

# ctx

ElementWrapper

# ctx

ReactiveWrapper

__module

# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

created(ctx) =>

void

# mounted(ctx)

# ctx

Context<IconSvgElement & JsxContext<IconSvgElement> & {

# ctor

CleanClass

# ctx

ElementWrapper

# ctx

ReactiveWrapper

__module

# Boolean

undefined | boolean

# Number

undefined | number

# String

undefined | string

mounted(ctx) =>

void

# on(name)

# name

on<K>(name) =>

EventHandler

IconSvgElement

LifecycleEvents

Off

# toJSON()

toJSON() =>

Pick

IconSvgElement

# updateSvg()

updateSvg() =>

Promise

# FetchProps

# raw

boolean

# strokeWidth

string | number

# IconKinds

# flags

"4x3" | "1x1"

# material

"outline" | "round" | "baseline" | "sharp" | "twotone"

# IconTypes

# boxicons

"solid" | "regular" | "logos"

# eos

"solid" | "animated" | "outlined"

# fontawesome

"solid" | "regular" | "brands"

# iconpark

# phosphor

# Icons

# bootstrap

# boxicons

{

# logos

# regular

# solid

# bytesize

# cssgg

# emojicc

# eos

{

# animated

# outlined

# solid

# feather

# flags

"at" | "hr" | "tv" | "cd" | "cl" | "id" | "ng" | "sa" | "tm" | "mp" | "sd" | "ai" | "ad" | "ae" | "af" | "ag" | "al" | "am" | "ao" | "aq" | "ar" | "as" | "au" | "aw" | "ax" | "az" | "ba" | "bb" | "bd" | "be" | "bf" | "bg" | "bh" | "bi" | "bj" | "bl" | "bm" | "bn" | "bo" | "bq" | "br" | "bs" | "bt" | "bv" | "bw" | "by" | "bz" | "ca" | "cc" | "cf" | "cg" | "ch" | "ci" | "ck" | "cm" | "cn" | "co" | "cr" | "cu" | "cv" | "cw" | "cx" | "cy" | "cz" | "de" | "dj" | "dk" | "dm" | "do" | "dz" | "ec" | "ee" | "eg" | "eh" | "er" | "es" | "et" | "eu" | "fi" | "fj" | "fk" | "fm" | "fo" | "fr" | "ga" | "gb" | "gb-eng" | "gb-nir" | "gb-sct" | "gb-wls" | "gd" | "ge" | "gf" | "gg" | "gh" | "gi" | "gl" | "gm" | "gn" | "gp" | "gq" | "gr" | "gs" | "gt" | "gu" | "gw" | "gy" | "hk" | "hm" | "hn" | "ht" | "hu" | "ie" | "il" | "im" | "in" | "io" | "iq" | "ir" | "is" | "it" | "je" | "jm" | "jo" | "jp" | "ke" | "kg" | "kh" | "ki" | "km" | "kn" | "kp" | "kr" | "kw" | "ky" | "kz" | "la" | "lb" | "lc" | "li" | "lk" | "lr" | "ls" | "lt" | "lu" | "lv" | "ly" | "ma" | "mc" | "md" | "me" | "mf" | "mg" | "mh" | "mk" | "ml" | "mm" | "mn" | "mo" | "mq" | "mr" | "ms" | "mt" | "mu" | "mv" | "mw" | "mx" | "my" | "mz" | "na" | "nc" | "ne" | "nf" | "ni" | "nl" | "no" | "np" | "nr" | "nu" | "nz" | "om" | "pa" | "pe" | "pf" | "pg" | "ph" | "pk" | "pl" | "pm" | "pn" | "pr" | "ps" | "pt" | "pw" | "py" | "qa" | "re" | "ro" | "rs" | "ru" | "rw" | "sb" | "sc" | "se" | "sg" | "sh" | "si" | "sj" | "sk" | "sl" | "sm" | "sn" | "so" | "sr" | "ss" | "st" | "sv" | "sx" | "sy" | "sz" | "tc" | "td" | "tf" | "tg" | "th" | "tj" | "tk" | "tl" | "tn" | "to" | "tr" | "tt" | "tw" | "tz" | "ua" | "ug" | "um" | "un" | "us" | "uy" | "uz" | "va" | "vc" | "ve" | "vg" | "vi" | "vn" | "vu" | "wf" | "ws" | "ye" | "yt" | "za" | "zm" | "zw"

# fontawesome

{

# brands

# regular

# solid

# iconoir

# iconpark

{

# Abstract

# Arrows

# Base

# Books

# Brand

# Build

# Character

# Charts

# Child

# Clothes

# Communicate

# Connect

# Datas

# Edit

# Emoji

# Foods

# Graphics

# Hands

# Hardware

# Health

# Industry

# Life

# Makeups

# Money

# Music

# Office

# Operate

# Others

# Peoples

# Sports

# Time

# Travel

# Weather

# material

# phosphor

{

# bold

# duotone

# fill

# light

# regular

# thin

# supertiny

# tabler

# IconSets

[k in T ]: string

# IconSetsNames

keyof typeof iconSets

# IconsWithTypes

Pick<Icons, keyof IconTypes>

# iconSets = ...

{

# bootstrap = 'npm/bootstrap-icons@1/icons/{icon}.svg'

string

# boxicons = 'npm/boxicons@2/svg/{type}/{prefix}-{icon}.svg'

string

# bytesize = 'npm/bytesize-icons@1/dist/icons/{icon}.svg'

string

# cssgg = 'npm/css.gg@2/icons/svg/{icon}.svg'

string

# emojicc = 'npm/emoji-cc@1/svg/{icon}.svg'

string

# eos = 'gh/lekoala/eos-icons-mirror/{type}/{icon}.svg'

string

# feather = 'npm/feather-icons@4/dist/icons/{icon}.svg'

string

# flags = 'npm/flag-svg-collection@1/flags/{kind}/{icon}.svg'

string

# fontawesome = 'npm/@fortawesome/fontawesome-free@5/svgs/{type}/{icon}.svg'

string

# iconoir = 'gh/lucaburgio/iconoir/icons/{icon}.svg'

string

# iconpark = 'gh/bytedance/IconPark/source/{type}/{icon}.svg'

string

# material = 'npm/@material-icons/svg@1/svg/{icon}/{kind}.svg'

string

# phosphor = 'gh/phosphor-icons/phosphor-icons@1/assets/{type}/{icon}-{type}.svg'

string

# supertiny = 'npm/super-tiny-icons@0.4.0/images/svg/{icon}.svg'

string

# tabler = 'npm/@tabler/icons@1/icons/{icon}.svg'

string

# prefixes = ...

{

# boxicons = ...

{

# logos = 'bxl'

string

# regular = 'bx'

string

# solid = 'bxs'

string

# IconSvg(props)

# props

P extends keyof IconKinds ? {

# icon

Icons [P]

# kind

IconKinds [P & "flags" & P & "material"]

# set

IconTypes

# icon

IconsWithTypes [P & "boxicons" & P & "eos" & P & "fontawesome" & P & "iconpark" & P & "phosphor"] [T & keyof IconsWithTypes [P & "boxicons" & P & "eos" & P & "fontawesome" & P & "iconpark" & P & "phosphor"]]

# set

# type

# icon

Icons [P & "boxicons" & P & "eos" & P & "fontawesome" & P & "iconpark" & P & "phosphor" & P & "bootstrap" & P & "flags" & P & "feather" & P & "iconoir" & P & "material" & P & "bytesize" & P & "cssgg" & P & "emojicc" & P & "supertiny" & P & "tabler"]

# set

HTMLAttributes

IconSvgElement

IconSvg<P, T>(props) =>

VKid

# fetchIconSvg(props)

# props

FetchProps & {

# set

IconKinds

# icon

Icons [P]

# kind

IconKinds [P & "flags" & P & "material"]

IconTypes

# icon

# type

# icon

fetchIconSvg<P, T>(props) =>

Promise

# getIconUrl(props)

# props

{

# set

IconKinds

# icon

Icons [P]

# kind

IconKinds [P & "flags" & P & "material"]

IconTypes

# icon

# type

# icon

getIconUrl<P, T>(props) =>

string

# propsSatisfyTemplate(props)

# props

any

propsSatisfyTemplate(props) =>

boolean

## Credits - [memoize-pure](https://npmjs.org/package/memoize-pure) by [stagas](https://github.com/stagas) – low footprint memoize for just pure sync functions with scalar arguments - [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework ## Contributing [Fork](https://github.com/stagas/icon-svg/fork) or [edit](https://github.dev/stagas/icon-svg) and submit a PR. All contributions are welcome! ## License MIT © 2022 [stagas](https://github.com/stagas)

icon-svg

npm i icon-svg pnpm add icon-svg yarn add icon-svg

`npm i icon-svg` `pnpm add icon-svg` `yarn add icon-svg`