npm package: @simtropolis/fractal-icons
Description: Icons for the fractal design system
Author: Simtropolis
Latest version: 0.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](https://cdn.materialdesignicons.com/5.3.45/) (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 <path> tag
-   Open the optimized *SVG Template.svg* located in the root of this repository in a text editor of your choice
-   Paste the <path> 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](https://cdn.materialdesignicons.com/5.3.45/)
-   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](https://cdn.materialdesignicons.com/5.3.45/) 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.