Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heshanera/svg-asset-loader
Webpack loader for processing SVG files. Loader options allows embedding SVGs into the HTML, spritesheet injection, or spritesheet extraction for linking.
https://github.com/heshanera/svg-asset-loader
inline-svg loader spritesheet svg svg-extract svg-processor svg-sprites webpack webpack-loader
Last synced: 3 days ago
JSON representation
Webpack loader for processing SVG files. Loader options allows embedding SVGs into the HTML, spritesheet injection, or spritesheet extraction for linking.
- Host: GitHub
- URL: https://github.com/heshanera/svg-asset-loader
- Owner: heshanera
- License: mit
- Created: 2024-06-05T14:51:53.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-12-17T15:27:04.000Z (23 days ago)
- Last Synced: 2024-12-17T15:50:23.206Z (23 days ago)
- Topics: inline-svg, loader, spritesheet, svg, svg-extract, svg-processor, svg-sprites, webpack, webpack-loader
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/svg-asset-loader
- Size: 522 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svg-asset-loader
Webpack loader for processing SVG files. Loader options allows 3 options: embedding SVGs directly into the HTML, combining SVGs into a single spritesheet injected into the HTML, or extracting SVGs into an external sprite file for linking.
[](https://github.com/heshanera/svg-asset-loader/actions)
[](https://nodejs.org/dist/v20.14.0/docs/api/)
[](https://www.npmjs.com/package/svg-asset-loader?activeTab=readme)
[](https://github.com/heshanera/svg-asset-loader/blob/master/LICENSE)
[](https://bundlephobia.com/package/svg-asset-loader)
## Installation
```bash
npm i svg-asset-loader
```
## Usage
### Spritesheet injection [:link:](https://github.com/heshanera/svg-asset-loader/tree/master/examples/injectSVGs)
```js
// webpack.config.js
const config = {
...
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-asset-loader',
},
],
},
...
};
export default config;
```
```js
// index.js
import icon from '../../assets/stop-watch.svg';
import icon2 from '../../assets/coconut-tree.svg';
...
...
```
### Inline [:link:](https://github.com/heshanera/svg-asset-loader/tree/master/examples/inlineSVGs)
```js
// webpack.config.js
const config = {
...
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-asset-loader',
options: {
strategy: 'inline',
},
},
],
},
...
};
export default config;
```
```js
// index.js
import icon from '../../assets/stop-watch.svg';
import icon2 from '../../assets/coconut-tree.svg';
...
...
```
### Extraction and linking [:link:](https://github.com/heshanera/svg-asset-loader/tree/master/examples/extractSVGs)
```js
// webpack.config.js
const config = {
...
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-asset-loader',
options: {
strategy: 'extract',
outFile: './public/spritesheet.svg',
prefix: './spritesheet.svg',
},
},
],
},
...
};
export default config;
```
```js
// index.js
import icon from '../../assets/stop-watch.svg';
import icon2 from '../../assets/coconut-tree.svg';
...
...
```
## Loader Options
| Property | Default | Description |
| ---------- | ------------ | -------- |
| strategy | `inject` | SVG loading strategy
Available strategies: `inject`, `extract`, `inline` |
| outFile | `sprite.svg` | File name for the generated svg spritesheet
To be used with the `extract` strategy |
| prefix | `sprite.svg` | File path to access the generated spritesheet
To be used with the `extract` strategy
href: `{prefix}#{id}` |
## Running Examples Locally
```bash
# Build the loader
npm run build
# Go to the example directory
cd examples/inlineSVGs/
# Start the server
npm run start
```