https://github.com/davidwells/icon-pipeline
🚚 SVG icon pipeline - Optimize icons & build SVG sprites
https://github.com/davidwells/icon-pipeline
build icons optimize svg
Last synced: about 1 year ago
JSON representation
🚚 SVG icon pipeline - Optimize icons & build SVG sprites
- Host: GitHub
- URL: https://github.com/davidwells/icon-pipeline
- Owner: DavidWells
- Created: 2019-01-08T03:54:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-16T20:40:22.000Z (over 2 years ago)
- Last Synced: 2025-03-27T06:22:42.459Z (about 1 year ago)
- Topics: build, icons, optimize, svg
- Language: JavaScript
- Homepage:
- Size: 258 KB
- Stars: 87
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Icon Pipeline
> The no nonsense icon pipeline
Optimizes svg icons and creates SVG sprites for `` tags.
Automatically optimize SVGs and build icon sprite for use in HTML or in JS.
## Install
```
npm install icon-pipeline
```
## Usage
Include `icon-pipeline` as a dev dependency and call it during your build process.
Here is an example:
```js
const path = require('path')
const iconPipeline = require('icon-pipeline')
const iconSrcFolder = path.join(__dirname, 'src', 'icons')
const iconOutputFolder = path.join(__dirname, 'build', 'icons')
/* Generate optimized SVGs and icon sprite */
iconPipeline({
// Location of non optimized svg icons
srcDir: iconSrcFolder,
// Output directory for optimized svg icons & svg sprite
outputDir: iconOutputFolder,
// Includes the sprite.js && sprite.svg in original icon directory
includeSpriteInSrc: true,
// Turn off additional svg classes added for advanced styling
/* disableClasses: true, */
// Namespace of icon IDs. Will prefix icon names. Example 'foo.svg' will become 'company-foo'
/* namespace: 'company' */
}).then((iconData) => {
console.log('iconData', iconData)
})
console.log(iconData)
```
See [`make-icons.js` file](/example) for a working example of this.
### Input
So for example, the src directory (**srcDir**) of unoptimized SVG icons looks like:
```
src/icons/
├── profile.svg
├── github.svg
└── facebook.svg
```
### Output
The output directory (**outputDir**) of icons will result in:
```
build/icons/
├── sprite.svg <-- SVG sprite for usage in HTML
├── sprite.js <-- SVG sprite for usage in javascript
├── icon-list.js <-- manifest of all available icons
├── profile.svg <-- optimized svg
├── github.svg <-- optimized svg
└── facebook.svg <-- optimized svg
```
## How to reference sprite icons
There are a couple different ways you can reference your newly created icon sprite.
### Vanilla HTML
Include your `sprite.svg` into your DOM.
```html
Your app
```
### Javascript
Or include the `sprite.js` into your JS app and inject into the DOM.
```js
import sprite from './icons/sprite'
import addSVGtoDOM from './components/Icon/addSVGtoDOM'
addSVGtoDOM(null, sprite)
```
See the [example](/example) for how to use with React components.
### `use` tag
After your sprite is in the DOM, you can reference icons with the `use` tag and the ID of the icon. `#facebook` here is the name of the icon file.
```html
```
## Recommended SVG resources
- [How to work with SVG icons](https://fvsch.com/svg-icons/)
- [Ways to manage icons in React](https://benadam.me/thoughts/react-svg-sprites/)
## SVG tools
- Image to SVG https://github.com/Schniz/svgify
- SVG to font https://github.com/jaywcjlove/svgtofont
## Alt packages
- https://github.com/svg-sprite/svg-sprite
- https://github.com/kreuzerk/svg-to-ts
- https://github.com/natemoo-re/astro-icon