Giter Club home page Giter Club logo

Comments (2)

XhmikosR avatar XhmikosR commented on June 10, 2024

PRs welcome. CLI isn't currently tested, any help is welcome there too, see #789.

Also, I assume you are using the latest 2x version. I doubt this could be fixed in 3.x, but please try the beta version too.

from svg-sprite.

chimok avatar chimok commented on June 10, 2024

Hello @wojciechczerniak,

The cli is totaly broken since 1-2 years. I use this simple script you can easy adjust to your needs. Use a name with .mjs extension because I'm using ESM imports.

#!/usr/bin/env node

import fs from 'fs';
import path from 'path';
import yargs from 'yargs'
import glob from 'fast-glob'
import { hideBin } from 'yargs/helpers'
import SVGSpriter from 'svg-sprite';

const { argv } = yargs(hideBin(process.argv)).scriptName("icon-builder.mjs")
    .usage("Usage: $0 -theme <theme>")
    .option("t", {
        alias: "theme",
        describe: "The name of the wordpress theme directory.",
        demandOption: "The theme name is required.",
        type: "string",
    });

const svgoConfig = {
    "log": "info",
    "shape": {
        "id": {
            "generator": (_name, file) => {
                const fileName = file.basename.slice(0, -4);
                return `${fileName}`;
            }
        },
        "dimension": {
            "maxWidth": 48,
            "maxHeight": 48,
            "attributes": true
        },
        "spacing": {
            "padding": 0
        },
        "transform": [
            {
                "svgo": {
                    "plugins": [
                    ]
                }
            }
        ]
    },
    "svg": {
        "xmlDeclaration": true
    },
    "mode": {
        "symbol": {
            "dest": './',
            "sprite": './web/ico.svg',
            "inline": true,
            "example": {
                "template": "./src/icons-template.html.hbs",
                "dest": `./web/app/themes/${argv.theme}/static/icons.html`
            }
        }
    },
    "variables": {}
};

// eslint-disable-next-line no-console
console.log(`Build icons for theme: ${argv.theme}`);

const spriter = new SVGSpriter(svgoConfig);
const files = glob.sync(`./web/app/themes/${argv.theme}/src/icons/*.svg`);
for (const file of files) {
    spriter.add(file, file, fs.readFileSync(file, 'utf8'));
}

spriter.compile((error, result, _data) => {
    // Run through all files that have been created for the `symbol` mode
    for (const type of Object.values(result.symbol)) {
        // Recursively create directories as needed
        fs.mkdirSync(path.dirname(type.path), { recursive: true });
        // Write the generated resource to disk
        fs.writeFileSync(type.path, type.contents);
    }
});

from svg-sprite.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.