@ianczm/hilti-icons v1.1.11

SVG Icons

Proof of concept that automating icon generation is possible!

High-level Roadmap

Details have moved to Issues

• Generate CSS from SVG icons manually
• Automate CI pipeline (creating a release triggers a new publish)
• Automate versioning based on diff
• Integrate with Figma and Frontify
• Generate icon packages for frontend frameworks

Automatic Deployment

!NOTE This is the preferred way to deploy icons; committing changes through pull requests allow quality checks to be done and workflows to be automated.

!TIP For adding icons, Node.js is not required as it is not necessary to build the project.

Process

1. Clone the project

   git clone https://github.com/ianczm/hilti-icons.git

2. Checkout a new branch e.g. addicon/<iconname>

3. Place your SVGs into the /icons folder and make a new commit

4. Push your changes

   git push -u <remote> addicon/<iconname>

5. Create a pull request to merge your branch into develop

6. Select changes in develop to be included in the next release (a release branch might be necessary for testing)

7. Once ready to release, bump the version in the release branch

   npm version <version>

8. Create a pull request to merge the release branch into main to reflect the latest change to production

9. Create the release (the auto-publish pipeline will run at this point)

Installation and Manual Deployment

!CAUTION This process basically force-publishes the main branch. See Automatic Deployment for production use cases.

Process

1. First, setup the project and install all dependencies

   git clone https://github.com/ianczm/hilti-icons.git
   npm install

2. Place your SVGs into the /icons folder

3. Run the deployment process manually on the main branch

   npm version <version> # e.g. 1.1.6, major, minor, patch
   git push # to the main branch
   git push <remote> v<version> # push release tag
   npm run build # build dist folder
   npm publish # deploy to CDN and go live!

Demos

Some demos have been prepared, you can check them out here: