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

/** @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

# ()

() =>

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

E

# 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

K

on<K>(name) =>

On

Fn

EventHandler

IconSvgElement

LifecycleEvents

K

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

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
.husky		.husky
example		example
scripts		scripts
src		src
test		test
types		types
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmrc		.npmrc
.pull-configs.js		.pull-configs.js
.swcrc		.swcrc
LICENSE		LICENSE
README.md		README.md
dprint.json		dprint.json
index.html		index.html
package.json		package.json
tsconfig.dist.json		tsconfig.dist.json
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

icon-svg

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

Examples

API

About

Releases 10

Languages

License

stagas/icon-svg

Folders and files

Latest commit

History

Repository files navigation

icon-svg

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

Examples

API

About

Topics

Resources

License

Stars

Watchers

Forks

Releases 10

Languages

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