/icon-library-visualization

Personal project for an icon library catalogue.

Primary LanguageVue

Icon Library Visualization

https://cesaroeduardo.github.io/icon-library-visualization

image

Project Setup

Installing Dependencies

npm install

Compiling and Hot-Reloading for Development

npm run serve

Compiling and Minifying for Production

npm run build

How to Add New Icon Libraries

This project is based on icon libraries that work as fonts.

Step 1

Place your font (recommended .woff2 extension) in the src > assets > icon-fonts directory.

image

Step 2

Declare the import, font-callers, and glyphs in src > assets > icons.scss. You can open your icon font file in softwares like FontForge to discover what glyphs your icons using.

image

Step 3

Declare the icons you want to add to the catalog in src > icons.json. The keywords are used to find the icons. (It is recommended to use AI to generate the array based on your Step 2)

image

Step 4 (Optional)

To activate the downloads in SVG format, place the SVG of each icon in src > assets > svg-raw. The file name must match the name declared in icons.scss. Again, you can use softwares like FontForge to transform font glyphs into SVG files.

image

Hope you enjoy the project. o/