SVG Icons to Svelte Components - Generator

The SVGs provided in example_of_generated_icons/lib/icons/utils/icons.json/ are mostly zondicons. Here you find an overview about all zondicons. They are provided under MIT license.

Creating components with iconGen.py

Take a look at the script iconGen.pyabove. With this, you can create Svelte components out of .svgfiles.

Syntax:

python iconGen.py <svg directory> <destination directory> <"append" (optional)>

Example for creating a whole new directory of icon components:

python iconGen.py "C:\Downloads\icons" "C:\Users\UserName\Documents\rezepte\src"

Example for inserting additional icons into an existing directory:

python iconGen.py "C:\Downloads\zusatz-icons" "C:\Users\UserName\Documents\rezepte\src" "append"

The destination path will normally be the src directory of your Svelte project. This creates the following structure:

lib
|---components  //contains Svelte components
|---utils
    |---Icon.svelte
    |---icons.json

The Svelte components in lib/icons/components are wrappers for lib/icons/utils/Icon.svelte. The component Icon.svelte displays all icons provided in lib/icons/util/icons.json. The main advantage of this approach is the flexibililty: all changes in Icon.svelte are affecting the wrapper components without building them again.

Configuration of Svelte

In lib/icons/components the generated icon components are found. All js imports are realised with the alias variable $lib. If this alias is not already established in your project, you can add it by editing your svelte.config.js as follows:

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(
        {
            postcss: true,
        }
    ),

    kit: {
        adapter: adapter(),
        //###############################
        //this block needs to be inserted
        alias: {                   
            '$lib': 'src/lib',
            '$lib/*': 'src/lib/*'
        }
        //###############################
    }
};

export default config;

Using the generated Svelte components

All generated components share the following properties:

• size: icon size in rem (default: 1)
• direction: icon direction in degree (default: 0)
• className: css classes to apply (default: "")
• color: icon css color (default: black)
• hover: css color by mouse hovering (default: "")
• rotationSpeed: in degrees per second, positive value clockwise, negative value counterclockwise (default: 0)
• backgroundColor: icon css background color (default: inherit)

Example of use

<AddOutline 
    size=2 
    direction=45 
    className="my-css-class" 
    color=blue 
    hover=green 
    rotationSpeed=10 
    backgroundColor=grey  
/>

License

This code is provided under MIT license.