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

example/app.tsx

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

Examples

# app

Try it live

# view source

example/app.tsx

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

icon-svg

icon-svg

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

Examples

API

icon-svg

icon-svg

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

Examples

API

`npm i icon-svg`

`pnpm add icon-svg`

`yarn add icon-svg`

`npm i icon-svg`

`pnpm add icon-svg`

`yarn add icon-svg`