Comments (2)
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.
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)
- Refactor `bin/svg-sprite.js`
- id and class get a weird prefix. HOT 1
- Customize {{ name }} in sprite.html preview (example) sheet HOT 1
- passing null for name to add function causes TypeError HOT 3
- Lodash.trim depdendency has an NPM audit warning HOT 1
- `masterShapes` does not sorted. HOT 2
- i am starting to work on unplugin-svg-sprite project HOT 5
- Adding template helper with config-file?
- Issue with @keyframes in SVG style tag HOT 1
- [v2.0.2] - Can we upgrade v2.0.2 to have lodash version that fixes the lodash.trim vulnerability HOT 6
- Spread in the path for svgo custom plugins
- Output sprite empty after migrating to v3 HOT 4
- Set custom path and output file name
- Update css-selector-parser in main
- Glob - Inflight - Missing Release of Resource after Effective Lifetime HOT 1
- Spriter's Shape Transform Method Only Running First Transformation in shape.transform Array. Again HOT 2
- COORDINATE MAP HOT 2
- I want to do this , but i don't know what i shoud do
- issue with async - callback was already called
- 🙏 Why can't SVG be found in paths that include params? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg-sprite.