svg2cssBG

                ___              ____   _____ 
               |__ \            |  _ \ / ____|
 _____   ____ _   ) |___ ___ ___| |_) | |  __ 
/ __\ \ / / _` | / // __/ __/ __|  _ <| | |_ |
\__ \\ V / (_| |/ /| (__\__ \__ \ |_) | |__| |
|___/ \_/ \__, |____\___|___/___/____/ \_____|
           __/ |       (c) 2023 JTSage        
          |___/ CSS background-image from SVG 

What is this?

This will take a folder of SVG files, compress/simplify them, and create CSS classes for each using the background-image property.

How Do I Use the output

<i class="iconClass-original-svg-filename></i>

You can do whatever you want to style the element.

Install

yarn add svg2cssbg

or

npm install svg2cssbg

Usage - Command Line

There is a very, very simple command line script included.

# node svg2cssbg <folder> <icon prefix>

No other options are supported for the CLI, use it programmatically.

Usage - As a Module

const { makeCSS } = require('svg2cssbg')

const options = {
    // Defaults shown

    // Separator for css class names - all non-valid characters are converted to this.
    // Additionally, input file names are normalized to lower case first.
    cssSeparator              = '-',

    // This is custom base CSS, used for all generated icons using the method(s) below
    // Default looks like this:
    // selector {
    //   display: inline-block;
    //   content: "";
    //   vertical-align: -.125em;
    //   background-repeat: no-repeat;
    //   height: 1em;
    //   width: 1em;
    //}
    customBaseCSS             = '',

    // This is an object of functions to generate the very simple HTML sample sheet.
    // See below for more
    customHTML                = null,

    // You can set which icon will be using the the scale demonstration line of
    // the HTML sample sheet here, or it's randomly chosen
    preferScaleIcon           = false,

    // Prefix for all classes. In this case <i class="ico ico-something"></i>
    iconPrefix                = 'ico',

    // Generate a simple sample sheet of all icons
    makeSampleSheet           = false,

    // Use a prefix (double) class common entry.
    // With this, icons need to be called like <i class="ico ico-something"></li>
    usePrefixClass            = false,
    
    // Use a wildcard class common entry
    // With this, icons need can be called like <i class="ico-something"></li>
    useWildCardClass          = true,

    // If *both* usePrefixClass and useWildCardClass are off, you
    // can call icons like <i class="ico-something"></li>, as the common CSS is
    // included in each definition.  This leads to a much larger CSS file.
}

const results = makeCSS(inputFolder, options)

Results Structure

const results = {
    cssFile       : 'string of CSS',

    errors        : ['array', 'of', 'SVG', 'optimization', 'errors'],

    htmlFile      : 'string of HTML sample sheet',

    iconList      : ['array', 'of', 'icon', 'names', 'without', 'prefix'],

    svgCleanFiles : [ // Array of objects
        { filename : 'original SVG filename', data : 'optimized SVG source' }
    ],
}

HTML generator functions

// All functions must return a string.
const customHTML = {
    // Closes the HTML file
    foot  : () => {},

    // Opens the HTML file.
    //   cssFileContents :: cssFile *string* (enclose in <style> probably)
    head  : (cssFileContents) => {},

    // Called per-icon.
    //   iconPrefix :: the cssPrefix
    //   iconClass :: the *full* icon class name
    line  : (iconPrefix, iconClass) => {},

    // Makes a scaling sample line before the giant list of icons.
    // Called once with either "options.preferScaleIcon" or a random choice.
    //   iconPrefix :: the cssPrefix
    //   iconClass :: the *full* icon class name
    scale : (iconPrefix, iconClass) => {},
}

FAQ

• Should I use this with multi-color SVG icons/sprites?
  • Yes. That is the best case for it
• Should I use this for single color SVG when I want color choice on the icon/sprite?
  • No. Probably a web font is better. This doesn't do that. It also uses the pre-supplied color strings, so it might respect currentColor, but I'm not sure.
• Can I...?
  • If it's not in the usage options above, no, probably not by default, no.