1.1.11 • Published 1 year ago

@ianczm/hilti-icons v1.1.11

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

CSS URI Thumbnail

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:

DemoDescription
css-urisvgs are encoded into icons.css which is then shared on the cloud
css-linkswebsites load icons.js and icons.css which replaces <i data-icon="icon-name" /> with actual <svg /> elements
1.1.11

1 year ago

1.1.9

1 year ago

1.1.10

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.1

1 year ago

1.1.2

1 year ago

1.1.0

1 year ago

1.0.0

1 year ago