https://github.com/stylebucket/icon-sprite
Combines SVG Files From a Folder Into a Single SVG Sprite, Exported to a Specified Directory.
https://github.com/stylebucket/icon-sprite
combine-svg merge-svg npm-package svg svg-icons svg-sprites
Last synced: 7 months ago
JSON representation
Combines SVG Files From a Folder Into a Single SVG Sprite, Exported to a Specified Directory.
- Host: GitHub
- URL: https://github.com/stylebucket/icon-sprite
- Owner: stylebucket
- License: mit
- Created: 2023-10-24T22:21:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-25T11:04:25.000Z (9 months ago)
- Last Synced: 2025-02-12T22:17:23.643Z (8 months ago)
- Topics: combine-svg, merge-svg, npm-package, svg, svg-icons, svg-sprites
- Language: TypeScript
- Homepage:
- Size: 190 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Icon Sprite
[](https://www.npmjs.com/package/icon-sprite)
[](https://github.com/woodbrettm/icon-sprite/actions/workflows/tests.yml)
[](https://github.com/woodbrettm/icon-sprite/blob/main/LICENSE)
This package contains functions which allow a dev to build an icon sprite from a folder of svg icons
and export it to a single icon sprite svg file.
- Best used inside an npm script for now.
- The majority of the original icons' SVG code is kept intact, so it's up to the dev to format
the original icon files. (See below).
- The svg file name is used to create the symbol id. So a filename of `up-arrow` can be referenced
in html using `#up-arrow`. (See below).
## Installation
```bash
npm install -D icon-sprite
```
## Usage
At the moment, the package is intended to be used inside a custom node script file, though
could also be used in a build process. In addition to the documentation below, the repo
contains a demo folder for reference.
### Exports
The package exports two functions. One to build the icon sprite as a string, and one to
export it to a file:
```javascript
import { buildSprite, exportSpriteToFile } from 'icon-sprite';
const sprite = await buildSprite('absolute-path-to-folder-containing-icons');
exportSpriteToFile(sprite, 'absolute-path-to-file.svg');
// Directory of sprite file and input icons cannot be the same, as
// buildSprite imports all svgs from the folder.
```
### Script Example
#### `Folder Structure:`
```
src
assets
icons
source
scripts
icon-sprite.ts|js
package.json
```
#### `icon-sprite.ts|js:`
```javascript
import path from 'path';
import { buildSprite, exportSpriteToFile } from 'icon-sprite';
const sourceFolderPath = path.resolve(__dirname, '../src/assets/icons/source');
const spriteFilePath = path.resolve(__dirname, '../src/assets/icons/icon-sprite.svg');
const spriteString = await buildSprite(sourceFolderPath);
exportSpriteToFile(spriteString, spriteFilePath);
```
#### `package.json`
I'm using @digitak/esrun instead of ts-node. Standard js file with
node command is also fine.
```json
{
"scripts": {
"icon-sprite": "esrun ./scripts/icon-sprite.ts"
}
}
```
### SVG Code
When combining the svg files,
- The `xmlns` attribute is removed
- `` is replaced with ``
- The svg file-name is added to the symbol as: `id="file-name"`
The source/original icon svgs must be formatted like so:
- It's typically best to remove the height and width attributes so the svg can
be sized from CSS.
- Make sure the `xmlns` attr is exactly `xmlns="http://www.w3.org/2000/svg`
- Other elements than `` inside the svg should be fine
### Input:
```xml
```
### Output:
The outputted file is formatted using Prettier.
```xml
... other icons converted to
```
### Referencing SVGs
```html
```