@cfware/icon-builder

Build icons.js in the target directory.

Usage no npm install needed!

<script type="module">
  import cfwareIconBuilder from 'https://cdn.skypack.dev/@cfware/icon-builder';
</script>

README

@cfware/icon-builder NPM Version

Build icons.js in the target directory.

Usage

Create ./pkgs/icon/icon-chars.js:

export const iconChars = {
    ban: '\uF05E',
    'caret-down': '\uF0D7',
    'caret-right': '\uF0DA',
    download: '\uF019',
    edit: '\uF044',
    envelope: '\uF0E0',
    'exclamation-triangle': '\uF071',
    'id-card': '\uF2C2',
    list: '\uF03A',
    lock: '\uF023',
    microphone: '\uF130',
    'phone-alt': '\uF879',
    plus: '\uF067',
    'question-circle': '\uF059',
    'sign-out-alt': '\uF2F5',
    times: '\uF00D',
    'trash-alt': '\uF2ED',
    upload: '\uF093',
    user: '\uF007'
};

The exported object should have keys associated with Font-Awesome icon names, values should be the Unicode point to produce for the WOFF2 font.

npm i -D @cfware/icon-builder
npm i @cfware/shadow-element
npx cfware-iconbuilder ./pkgs/icon ./pkgs/icon/icon-chars.js iconChars

This command will produce ./pkgs/icon/icon.js. Importing that file will register the custom element cfware-icon. An example usage is:

const banIcon = () => html`<cfware-icon icon="\uF05E" />`;

In addition ./pkgs/icon/fontawesome-free will be created containing the package.json and LICENSE.txt files installed by @fortawesome/fontawesome-free.