Skip to content

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

License

Notifications You must be signed in to change notification settings

drygnet/stenciljs-icons-example

Repository files navigation

Built With Stencil

Use icons in stencil Generic badge

Demo of how to use icon libraries in stenciljs

Demo Image

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.