DefIcon

Bring SVG Definitions to Icon Component
for WebApp

Quick start

ES Module from JSDelivr

This example use SVG Definition Icon from Gnomicon Project. Or you can download Icons from here and put on your server in the same domain as your web page.

HTML

<script defer type="module">
import { DefIcon } from '//cdn.jsdelivr.net/npm/@devcapsule/deficon@2.0/+esm';

class Icon extends DefIcon({ url: './asset/icon.svg'}) {};

customElements.define('el-icon', Icon);
</script>
<body>
    <div style="font-size: 3rem;">
        <el-icon name="applause"></el-icon>
        <el-icon name="wallet" style="fill: red;"></el-icon>
        <el-icon name="cat-sleeping" style="font-size: 2rem;"></el-icon>
    </div>
</body>

NPM & JS Build Tools

shell

$ npm i @devcapsule/deficon

Javascript

import { DefIcon } from '@devcapsule/deficon';

More SVG Def Icons

You can generate and download more SVG Def Icons from IcoMoon

Mixin

DefIcon provides mixin for extending other HTMLElement Component

import { DefIconMixin } from '@devcapsule/deficon';

class Icon extends DefIconMixin(HTMLElement, {url: './asset/icon.svg'}) {};