drygnet / stenciljs-icons-example

Using FontAwesome, Office UI Fabric and Material -icons in stenciljs

Use icons in stencil

Demo of how to use icon libraries in stenciljs

Getting Started

To try this demo, clone this repo to a new directory:

git clone https://github.com/drygnet/stenciljs-icons-example.git 
cd stenciljs-icons-example
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

Three approaches

FontAwesome

... uses the downloaded all.min.cssthat expects the font-files to be in the webfonts-directory on the server, look at the copy-block in stencil.config.js

Material Icons

... has all the CSS that is needed included in the component, the same webfonts-directory is used for simplicity

Office UI Fabric Icons

... uses the downloaded fabric-icons-inline.css that contains all the CSS and the actual font.

Extra files in assets-directory

Not all files in the assets directory are needed, just the ones referenced in the components and the font files that are copied via stencil.config.js I kept the files if you e.g. don't need the brand-icons in FontAwesome (replace all.min.css with the CSS you need in the component) or if you want to change the Material Icons implementation to use copied webfonts.

stenciljs-icons-example's Issues

How can use iconify in Stenciljs?

I want to use inconify in stenciljs web-component. How can i do it?

Font-awesome and Office UI Fabric not working with stencil 1.13

It seems like stencil core version 1.13 shows blank images on Font-awesome and Office UI Fabric images.

Repro steps:
Clone repo: git clone https://github.com/drygnet/stenciljs-icons-example.git
npm install && npm start
//This works, all images shows correctly.

//But if you remove package-lock.json and retry, it doesn't work:
rm -rf node_modules && rm package-lock.json
npm i && npm start
//package-lock.json now shows updated stencil-core version and images shows incorrectly.

It might just be a version issue, how can this be resolved?