npm package: @simtropolis/fractalicons
Description: Svelte wrappers for the Heroicons library.
Latest version: 0.0.2

# Fractal Icons

**NOTE: These docs need to be updated**

Icons for the fractal design system

Svelte wrapper for [Heroicons](https://heroicons.com) and [MaterialDesignicons](https://materialdesignicons.com/)

This library differs from others in a couple main ways:

- The icon components forward common event listeners to the underlying SVG, so you may use `on:click` and so on.
- The API is closer to the official React wrappers, making it easier to use when converting components to Svelte in conjunction with [fractalicons](https://github.com/simtropolis/fractalicons).

## Installation

```
npm install -D @simtropolis/fractalicons
```

## HeroIcons

Heroicons contains two types of icons: outline and solid. They can be imported from `@simtropolis/fractalicons/outline` and `@simtropolis/fractalicons/solid` respectively.

All icon names are CamelCased and end with the word `Icon`; for example, the `academic-cap` icon on heroicons.com is imported as `AcademicCapIcon`.

```svelte
<script>
	import { SelectorIcon } from '@simtropolis/fractalicons/solid';
	import { CheckIcon } from '@simtropolis/fractalicons/outline';
</script>

<CheckIcon />
<SelectorIcon class="my-class" aria-hidden="true" />
```

## Material Design Icons

Simple steps to adding new icons to the Fractal Icons font

### 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.



## Documentation

See [heroicons](https://heroicons.com) and [materialdesignicons](https://materialdesignicons.com/) for the full list of icons.


## Creating a Svelte project

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app
```

> Note: the `@next` is temporary

### Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

### Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.