@simtropolis/fractalicons

Fractal Icons

NOTE: These docs need to be updated

Icons for the fractal design system

Svelte wrapper for Heroicons and MaterialDesignicons

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.

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.

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

Documentation

See heroicons and materialdesignicons for the full list of icons.

Creating a Svelte project

Everything you need to build a Svelte project, powered by create-svelte.

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

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

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:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.