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

view source

/** @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 = () => (
  <>
    <IconSvg set="bytesize" icon="camera" />
    <IconSvg set="bootstrap" icon="calendar3" />
    <IconSvg set="bootstrap" icon="rss" />
    <IconSvg set="bootstrap" icon="peace" />

    <IconSvg set="boxicons" type="logos" icon="javascript" />
    <IconSvg set="boxicons" type="logos" icon="internet-explorer" />
    <IconSvg set="boxicons" type="regular" icon="alarm" />
    <IconSvg set="boxicons" type="regular" icon="pencil" />
    <IconSvg set="boxicons" type="solid" icon="alarm" />
    <IconSvg set="boxicons" type="solid" icon="pencil" />

    <IconSvg set="bytesize" icon="book" />
    <IconSvg set="bytesize" icon="video" />
    <IconSvg set="bytesize" icon="moon" />

    <IconSvg set="cssgg" icon="calendar-dates" />
    <IconSvg set="cssgg" icon="log-out" />
    <IconSvg set="cssgg" icon="magnet" />

    <IconSvg set="emojicc" icon="oncomingTaxi" />
    <IconSvg set="emojicc" icon="paperclip" />
    <IconSvg set="emojicc" icon="handSplayedTone5" />

    <IconSvg set="eos" type="solid" icon="car_rental" />
    <IconSvg set="eos" type="solid" icon="chat_bubble" />
    <IconSvg set="eos" type="solid" icon="biotech" />
    <IconSvg set="eos" type="outlined" icon="car_rental" />
    <IconSvg set="eos" type="outlined" icon="chat_bubble" />
    <IconSvg set="eos" type="outlined" icon="biotech" />
    {/* <IconSvg set="eos" type="animated" icon="compass" /> */}

    <IconSvg set="feather" icon="compass" />
    <IconSvg set="feather" icon="mail" />
    <IconSvg set="feather" icon="gift" />

    <IconSvg set="flags" icon="ua" kind="4x3" />
    <IconSvg set="flags" icon="ru" kind="4x3" />

    <IconSvg set="fontawesome" type="brands" icon="java" />
    <IconSvg set="fontawesome" type="regular" icon="compass" />
    <IconSvg set="fontawesome" type="solid" icon="compass" />

    <IconSvg set="iconoir" icon="cart" />
    <IconSvg set="iconoir" icon="github" />
    <IconSvg set="iconoir" icon="fingerprint" />

    <IconSvg set="iconpark" type="Abstract" icon="cube" />
    <IconSvg set="iconpark" type="Arrows" icon="download" />
    <IconSvg set="iconpark" type="Base" icon="dislike" />
    <IconSvg set="iconpark" type="Books" icon="book" />
    <IconSvg set="iconpark" type="Brand" icon="mitsubishi" />
    <IconSvg set="iconpark" type="Build" icon="arc-de-triomphe" />
    <IconSvg set="iconpark" type="Character" icon="bitcoin" />
    <IconSvg set="iconpark" type="Charts" icon="chart-graph" />
    <IconSvg set="iconpark" type="Child" icon="heart-ballon" />
    <IconSvg set="iconpark" type="Clothes" icon="bow" />
    <IconSvg set="iconpark" type="Communicate" icon="message-unread" />
    <IconSvg set="iconpark" type="Connect" icon="branch-one" />
    <IconSvg set="iconpark" type="Datas" icon="database-code" />
    <IconSvg set="iconpark" type="Edit" icon="calendar" />
    <IconSvg set="iconpark" type="Emoji" icon="dizzy-face" />
    <IconSvg set="iconpark" type="Foods" icon="banana" />
    <IconSvg set="iconpark" type="Graphics" icon="hexagon-one" />
    <IconSvg set="iconpark" type="Hands" icon="spider-man" />
    <IconSvg set="iconpark" type="Hardware" icon="chip" />
    <IconSvg set="iconpark" type="Health" icon="mask" />
    <IconSvg set="iconpark" type="Industry" icon="oscillator" />
    <IconSvg set="iconpark" type="Life" icon="beach-umbrella" />
    <IconSvg set="iconpark" type="Makeups" icon="scissors" />
    <IconSvg set="iconpark" type="Money" icon="blockchain" />
    <IconSvg set="iconpark" type="Music" icon="fm" />
    <IconSvg set="iconpark" type="Office" icon="file-code" />
    <IconSvg set="iconpark" type="Operate" icon="radio-two" />
    <IconSvg set="iconpark" type="Others" icon="checklist" />
    <IconSvg set="iconpark" type="Peoples" icon="user" />
    <IconSvg set="iconpark" type="Sports" icon="black-eight" />
    <IconSvg set="iconpark" type="Time" icon="alarm-clock" />
    <IconSvg set="iconpark" type="Travel" icon="aviation" />
    <IconSvg set="iconpark" type="Weather" icon="snow" />

    <IconSvg set="phosphor" type="regular" icon="bezier-curve" />
    <IconSvg set="phosphor" type="regular" icon="alarm" />
    <IconSvg set="phosphor" type="regular" icon="airplane-takeoff" />
  </>
)

render(
  <>
    <button onclick={() => (document.body.className = 'light')}>light</button>
    <button onclick={() => (document.body.className = 'dark')}>dark</button>
    <div id="demo" style="width:435px">
      <div class="large">
        <AllSets />
      </div>
      <div class="medium">
        <AllSets />
      </div>
      <div class="small">
        <AllSets />
      </div>
    </div>
  </>,
  document.body
)

API

# IconSvg

toString

()

() =>

string

# IconSvgElement – The IconSvgElement custom element.

src/element.ts#L49

For a more complete example with typings check playground/app.tsx

Browser needs to support Constructible StyleSheets (polyfill).

JS / TS:

customElements.define('icon-svg', IconSvgElement)

CSS:

icon-svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.5px;
  --stroke: #fff;
  --fill: #028;
  --fill-secondary: #468;
}

HTML:

<icon-svg set="boxicons" type="logos" icon="javascript"></icon-svg>

constructor

()

new IconSvgElement

()

IconSvgElement

icon

= String

src/element.ts#L54

string

kind

= String

src/element.ts#L57

string

raw

= Boolean

src/element.ts#L58

boolean

set

= String

src/element.ts#L55

string

strokeWidth

= Number

src/element.ts#L59

number

type

= String

src/element.ts#L56

string

attributeChangedCallback

()

src/element.ts#L79

attributeChangedCallback() =>

void

updateSvg

()

src/element.ts#L63

updateSvg() =>

Promise

# FetchProps

src/fetch.ts#L16

raw

src/fetch.ts#L17

boolean

strokeWidth

src/fetch.ts#L18

string | number

# IconKinds

src/types.ts#L80

flags

src/types.ts#L81

"4x3" | "1x1"

material

src/types.ts#L82

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

# IconTypes

src/types.ts#L72

boxicons

src/types.ts#L73

"solid" | "regular" | "logos"

eos

src/types.ts#L74

"solid" | "animated" | "outlined"

fontawesome

src/types.ts#L75

"solid" | "regular" | "brands"

iconpark

phosphor

# Icons

bootstrap

boxicons

{

logos

src/types.ts#L6

regular

src/types.ts#L5

solid

src/types.ts#L4

}

bytesize

cssgg

emojicc

eos

{

animated

src/types.ts#L12

outlined

src/types.ts#L13

solid

src/types.ts#L14

}

feather

src/types.ts#L16

flags

src/types.ts#L17

"at" | "hr" | "tv" | "cd" | "cl" | "id" | "ng" | "sa" | "tm" | "ad" | "ae" | "af" | "ag" | "ai" | "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" | "mp" | "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" | "sd" | "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"