icons-monorepo

This project illustrates how to use svg-to-ts to generate icons inside a monorepo.

Setup

This project contains a application named food. This app will display a bunch of food icons. The icons are located in a library named isometric-icons.

Isometric icons folder

The isometric-icons folder contains the following elements:

• A icons folder that contains all the raw SVG icons.
• A svg-to-ts.json file that contains the svg-to-ts specific configuration.
• A lib folder that contains a isomeric-icons.component, a isomeric-icons-registry.service and a isomeric-icons.module. This folder furthermore contains the generated icons constants. Those constants are generated by svg-to-ts when we run the generate-isometric-icons script.

Inside the application we can then import the IsomericIconsModule, register our icons using the IsomericIconsRegistry and then finally use an icon with the help of the IsomericIconsComponent.

How to start the project

npm start

How to regenerate the icon constants

npm run generate-isometric-icons

Analyze the bundle size

npm run analyze

Note! The Webpack bundle analyzer might display some missleading information. The bundle analyzer displays icons in the size of more than 400KB. Thats the size of all icons. However, your bundle is only around 140 KB. And if you check the fesm file in the dist folder you will see that only used icons are included. Means the treeshaking works as expected.

Further resources

For further information I recommend you to checkout my blogposts and tutorials on how to generat an icon library.

Blog post

How to build your own tree-shakable svg-icons-library in less than 30 minutes guides you through the process of building your own icon library with svg-to-ts.

Video tutorial

svg-to-ts docs

Docs