Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

svg-symbol-sprite

Package Overview
Dependencies
3
Maintainers
1
Versions
4
Issues
File Explorer

Advanced tools

svg-symbol-sprite

A script to generate a symbol sprite from SVG files

    1.0.3latest

Version published
Maintainers
1
Yearly downloads
4,037

Weekly downloads

Readme

Source

SVG Symbol Sprite npm MIT license Twitter Analytics

Create an SVG symbol sprite from your SVG files.

All issues on Github Open issues on Github Closed issues on Github Latest Github gag GitHub last commit

Weekly downloads on NPM Monthly downloads on NPM Yearly downloads on NPM Total downloads on NPM

Githib build status Combined Github checks Publish size Top language Used languages count Renovate App Status Make A Pull Request

A Node.js CLI tool which creates an optimized SVG symbol sprite out of a folder full of SVG files.

Provides handy defaults so you don't have to waste time.

All available options can be tweaked. You can even supply your own SVGO config.

This tool is heavily inspried by sprite.sh

Installation

npm i svg-symbol-sprite -g # or yarn global add svg-symbol-sprite

Options

ArgumentDescription
-i, --inputSpecifies input dir (current dir by default)
-o, --outputSpecifies output file ("./sprite.svg" by default)
-v, --viewboxSpecifies viewBox attribute (parsed by default)
-p, --prefixSpecifies prefix for id attribute ("icon-" by default)
-c, --configAbsolute path to the SVGO config file
Usage: svg-symbol-sprite [options] Options: -i, --input Specifies input dir (current dir by default) -o, --output Specifies output file ("./sprite.svg" by default) -v, --viewbox Specifies viewBox attribute (parsed by default) -p, --prefix Specifies prefix for id attribute ("icon-" by default) -c, --config Absolute path to the SVGO config file

Usage as a package.json script

The tool can be also used as a package.json script. You need to add it to the devDependencies of your project's package.json.

{ "scripts": { "svg-sprite": "svg-symbol-sprite -i ./assets/svgs -o ./dist/sprite.svg" } } npm run svg-sprite # or yarn svg-sprite

Usage without installation (with npx)

The tool can be also used without installing it:

npx svg-symbol sprite -i ./assets/svgs -o ./dist/sprite.svg

SVG Optimization

svg-symbol-sprite optimizes the input SVG files using SVGO and an opinionated configuration file. In order to customize the SVGO config, one can do so by using the -c or --config option and an absolute path to the SVGO config file.

Accessibility

svg-symbol-sprite does not help with SVG icons' accessibility. This is your responsibility as a developer - you should make sure that your SVGs contain relevant title and id attributes.

Support this project

Tweet Donate on PayPal Become a Patron Buy Me A Coffee Donate on Liberapay Donate on Issuehunt

LICENSE

MIT

Keywords

FAQs

What is svg-symbol-sprite?

A script to generate a symbol sprite from SVG files

Is svg-symbol-sprite popular?

The npm package svg-symbol-sprite receives a total of 232 weekly downloads. As such, svg-symbol-sprite popularity was classified as not popular.

Is svg-symbol-sprite well maintained?

We found that svg-symbol-sprite demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 04 Jan 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc