@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
Clone the project
git clone https://github.com/ianczm/hilti-icons.git
Checkout a new branch e.g.
addicon/<iconname>
Place your SVGs into the
/icons
folder and make a new commitPush your changes
git push -u <remote> addicon/<iconname>
Create a pull request to merge your branch into
develop
Select changes in
develop
to be included in the next release (a release branch might be necessary for testing)Once ready to release, bump the version in the release branch
npm version <version>
Create a pull request to merge the release branch into
main
to reflect the latest change to productionCreate 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
First, setup the project and install all dependencies
git clone https://github.com/ianczm/hilti-icons.git npm install
Place your SVGs into the
/icons
folderRun the deployment process manually on the
main
branchnpm 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:
Demo | Description |
---|---|
css-uri | svgs are encoded into icons.css which is then shared on the cloud |
css-links | websites load icons.js and icons.css which replaces <i data-icon="icon-name" /> with actual <svg /> elements |