@simtropolis/fractal-icons v0.2.2

Fractal Icons

Icons for the fractal design system

Adding Icons

NOTE: These docs need to be updated

Simple steps to adding new icons to the Fractal Icons font

Adding Material Design Icons

Locate your icon

• Go to https://materialdesignicons.com/ and search for the icon you want to add.
• Download the icon as ".SVG Optimized"

Determine the Character code

• Locate the hexadecimal character code of the icon you just downloaded in the materialdesignicons.com cheat sheet (use chromes find in page)

Adding Custom Icons

Create your icon

• Follow the design guide from existing examples
• Once the icon is ready be sure the shape is a single compound path, no extra layers or groups

Save and optimize your SVG

• Choose to "Save As" an "SVG", ensuring to set the "Decimal Places" field is set to a value of "3" (This ensures your shapes are saved out with an accurate level of detail)
• Click the "SVG Code..." button
• Copy the entire tag
• Open the optimized SVG Template.svg located in the root of this repository in a text editor of your choice
• Paste the in your clipboard over the path in the template file and save as

Naming your custom SVG

• Try to match the naming conventions used in the material design icon open source cheetsheet
• if the icon is the same concept then consider it a replacement and reuse the name (minus the mdi prefix)
• if its something new, do your best to try and match for example "someconcept-outline.svg" as it would likely follow the outline style

Choosing the character code

• In the same way as the naming, try to reuse the hexadecimal codes in the cheetsheet if its a replacement icon
• For anything new we have manually started using the "E800" block of hexadecimal numbers
• You'll have to open the demo.html from the repository root and click on the "show codes" checkbox to determine which is the next available in the sequence
• As you can see in the example above "E814" is the last icon in that "E800" block, so your icons character code should be "E815"

Import into Github Repository

Upload your font file to the SVG folder

• In your browser navigate to the 'svgs' subfolder of the fractal-icons repo
• https://github.com/simtropolis/fractal-icons/tree/master/svgs
• Click Add file > Upload files
• Choose or drag your SVG file to add it to the repository
• Fill out the commit description specifying what icon you are adding to the repository and why
• When everything looks accurate, click on the green "Commit changes" button
• When all the information looks accurate, click the green "Create pull request" button.

Download font package

• Navigate to the root of the fractal-icon repository
• https://github.com/simtropolis/fractal-icons/
• Click on the "Actions" tab
• Click on the latest "workflow run" that should match your commit title from the previous step.
• Under the "Artifacts" section, you will see the "FractalIconFont" package, click it to download locally.