Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Epimodev/parcel-plugin-svg-sprite
Parcel plugin that generates a SVG sprite with <symbol> elements and inject it in built html
https://github.com/Epimodev/parcel-plugin-svg-sprite
Last synced: 3 months ago
JSON representation
Parcel plugin that generates a SVG sprite with <symbol> elements and inject it in built html
- Host: GitHub
- URL: https://github.com/Epimodev/parcel-plugin-svg-sprite
- Owner: Epimodev
- Created: 2018-09-19T18:25:09.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-22T08:21:12.000Z (10 months ago)
- Last Synced: 2024-07-21T16:43:05.935Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 988 KB
- Stars: 27
- Watchers: 2
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-parcel - SVG Sprite - Plugin that generates a sprite of imported svg files. (Plugins / Other)
README
# SVG sprite parcel plugin
A parcel plugin which create a svg sprite of imported svg and inject it in html entry point.
> Since version 2.0.0 this plugin works only with Parcel 2.0.
> If you use Parcel 1.x you can use v1.4.1
### Installation
This plugins is composed of a transformer and a packager.
```bash
yarn add -D parcel-transformer-svg-sprite
yarn add -D parcel-packager-svg-sprite
# or with npm
npm install -D parcel-transformer-svg-sprite
npm install -D parcel-packager-svg-sprite
```
### Configuration
Once the transformer and the packager are installed, you have to create `.parcelrc` file:
```json
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["parcel-transformer-svg-sprite"]
},
"packagers": {
"*.html": "parcel-packager-svg-sprite"
}
}
```
> You can set a more specific pattern instead of `*.svg` if you want to create a sprite only with svg from a specific folder.
### Exemple
Once the plugin is installed, you can import svg like this :
In html file :
```html
...
...
...
...
```
In javascript file :
```javascript
import checkmark from './icons/checkmark.svg';
const icon = `
`;
```
Or with JSX :
```javascript
import React from 'react';
import checkmark from './icons/checkmark.svg';
const icon = (
);
```
When you import a svg, you get the id of the symbol generated in built sprite. This is why you can use it as `xlink:href` attribute.
#### HTML input example:
```html
Document
```
#### Generated HTML expected
```html
Document
...
```
### Optimization
This plugin uses [svgo](https://github.com/svg/svgo) to optimize svgs before generating the sprite.
You can configure svgo by creating `svgo.config.js` file. More info about available options here: https://github.com/svg/svgo#configuration
### Advantages :
- Unlike initial parcel behaviour which return an url, here you can apply css to customise the imported svg (for example the color, the stroke, ...)
- Optimize the size of imported svg
- Create a sprite to avoid several http requests
- Inject sprite at compilation time instead of browser run time
- Limit DOM manipulation by injected only symbol id instead of all svg nodes when the svg is injected in a page
### Why inject SVG sprite in HTML instead of using an external file ?
Each time we inject an element \ in the DOM, a request is launch to get "file.svg". So the icon appear with a delay depending on http response time. If you have an animation when svg symbol is injected in DOM, the icon will appear in the middle of animation.
### In which case this plugin is made for
This plugin was developped to create icon system based on svg.
As long as you import little svg and the size of the sprite isn't too heavy, I think there isn't any problem (it depends on your case but in my opinion the sprite should not exceed 100kb).
If you have to much icons, there is a risk to have a significantly bad impact on the delay of first render of your web app.
### In which case I don't recommend this plugin
Like I said above, if you want to import a lot of svg files, or big illustrations, this plugin is not good for your case.
You first render time can be too much delayed.
### Improvement to make
- code splitting: this plugin can generate a svg by bundle. For the moment, all svg of all bundles are injected at compilation time in HTML entry point.