Icons

Icons are a great way to communicate information to users in a small amount of space. Whether to indicate success or error, they are friendlier and more recognizable than text. However, creating them in a strong CSP environment can be tedious, especially when you have a lot of them and need them in a lot of colors and sizes.

Fortunately, Vanilla Plus JS comes with a preprocessor command to make working with SVG icons extremely easy. Assuming you have an SVG with a single color in it at src/public/img/icons/my-icon.svg, and that color matches your primary color as specified in your default css file (typically src/public/css/main.css), the following snippet in a CSS file will generate the icon in all of your UI kits sizes and colors:

/*! PREPROCESSOR: icon my-icon primary all-colors all-sizes */

If, for example, your UI kit sizes and colors are

:root {
    --col-primary: #333;
    --col-primary-dark: #000;
    --col-primary-light: #666;
    --col-disabled: #CCC;
    --icon-size-large: 1.5rem;
    --icon-size-medium: 1rem;
    --icon-size-small: 0.75rem;
}

Then it would generate the following classes:

• .icon-my-icon-large-primary
• .icon-my-icon-large-primary-dark
• .icon-my-icon-large-primary-light
• .icon-my-icon-medium-primary
• .icon-my-icon-medium-primary-dark
• .icon-my-icon-medium-primary-light
• .icon-my-icon-small-primary
• .icon-my-icon-small-primary-dark
• .icon-my-icon-small-primary-light
• .icon-btn-my-icon-large
• .icon-btn-my-icon-medium
• .icon-btn-my-icon-small

The button class will use your primary color, with primary-dark for hover and disabled for disabled. For example, here is the success icons automatically generated button:

To use automatically generated buttons it needs one span in the middle which will be used for the icon:

<button class="icon-btn-success-medium">
    <span class="icon-btn--icon"></span>
</button>

In case you need the generated SVGs outside of these classes, their location is guarranteed and follows a simple pattern: /img/icons/<NAME>/<COLOR>.svg

For example, /img/icons/success/primary.svg is the location of the success icon in the primary color. If you want to specify the colors or sizes, they are done so through json lists. You can also disable the button with no-btn

/*! PREPROCESSOR: icon my-icon primary ["primary"] ["small"] no-btn */

Finally, you can configure the button colors by using a json object where no-btn would go. In this case you can specify multiple button names, where the key default will not get suffixed, but the rest will have their suffixes added to their class, in the form

.icon-btn-{icon_name}-{size}-{suffix}

For example, to configure a secondary and accent button:

/*! PREPROCESSOR: icon eye primary
    all-colors
    all-sizes
    {
        "default": ["primary", "primary-dark", "disabled"],
        "secondary": ["secondary", "secondary-dark", "disabled"],
        "accent": ["accent", "accent-dark", "disabled"]
    }
*/
            

Which would result in the following for the default, secondary, and accent versions, respectively: