Skip to content

cfware/icon-builder

Repository files navigation

@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.