Most development is simply adding/changing existing SVG files under the
./src/svg directory.
To add a new icon, please follow the following steps:
- Make or edit your icon! All icons should be vector SVG files. If you haven't dealt with SVGs before, check out Inkscape.
- Make sure your SVG is cleaned up and minified. You can just upload your SVG file to SVGOMG and then download the output file using the default settings.
- Name your icon in all lowercase, separating each word with an underscore. If specifying the dimensions of a cube in your icon, name, don't include any
xsymbols. (correct:crazy_333.svg, incorrect:Crazy-3x3x3.SVG) - Remove any borders and fill colors from the your icon. To do this, look inside the SVG file and remove anything that looks like
fill="..."orstroke="...". - Make a pull request here in GitHub adding your new icon file.
Our maintainers can help you with any of the above steps if you need help.
If you want to actually build a font or CSS locally, you'll need some more tooling.
You'll need bun to install development dependencies and
build the project. Either install bun with your preferred package manager, or
use our Nix-powered dev shell.
Check out and build the project as follows:
git clone https://github.com/cubing/icons && cd icons
makeFiles are build into the ./dist directory.
We provide a nix shell that you can activate with nix develop.
To bump the version and deploy to npmjs.org:
npm version [major|minor|patch] -m "Release description"
git push --follow-tags
make publishNote that cdn.cubing.net requires an explicit version bump and deployment in order to pick up the new @cubing/icons version:
git clone https://github.com/cubing/cdn.cubing.net && cd cdn.cubing.net
# Requires SSH and optional Fastly credentials to deploy
make roll-@cubing/icons