Skip to content

Commit

Permalink
chore: add example to inline SVG w/o ID collision
Browse files Browse the repository at this point in the history
  • Loading branch information
webdiscus committed Oct 6, 2023
1 parent 7d2d027 commit f4d37ea
Show file tree
Hide file tree
Showing 10 changed files with 4,451 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,7 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)
- Handlebars with Webpack [View in browser](https://stackblitz.com/edit/webpack-webpack-js-org-mxbx4t?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/handlebars/)
- Extend Handlebars layout with blocks [View in browser](https://stackblitz.com/edit/webpack-webpack-js-org-bjtjvc?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/handlebars-layout/)
- Auto generate integrity hash for `link` and `script` tags [View in browser](https://stackblitz.com/edit/webpack-integrity-hvnfmg?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/integrity/)
- Inline multiple SVG files w/o ID collision [View in browser](https://stackblitz.com/edit/inline-svg-wo-ids-collision?file=webpack.config.js) | [source](https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/examples/inline-svg-unique-id/)

<a id="features" name="features" href="#features"></a>

Expand Down
47 changes: 47 additions & 0 deletions examples/inline-svg-unique-id/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Inline multiple SVG files w/o ID collision

This is an example how to inline the same SVG file containing an ID many times,
where will be generated unique ID used in inlined SVG to prevent IDs collision.

## Solution

We can use the `svgo-loader` and an own `uniqueIds` svgo plugin to generate an unique ID.
In the HTML each SVG file must have an unique URL query to force run `svgo-loader` for each SVG.

For example:

```html
<img src="./icon.svg?1" />
<img src="./icon.svg?2" />
...
```

Generated HTML will contain inlined SVG with unique IDs:

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 100 100 " width="100">
<defs><ellipse cx="50%" cy="50%" rx="42%" ry="42%" fill="red" id="id-1__circle" /></defs>
<g><use href="#id-1__circle" /></g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0 100 100 " width="100">
<defs><ellipse cx="50%" cy="50%" rx="42%" ry="42%" fill="red" id="id-2__circle" /></defs>
<g><use href="#id-2__circle" /></g>
</svg>
```

Use the [HTML Builder Plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) for Webpack
to compile and bundle source files in HTML.

## View in browser

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/inline-svg-wo-ids-collision?file=README.md)

## How to use

```sh
git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
cd examples/inline-svg-unique-id
npm install
npm start
```
Loading

0 comments on commit f4d37ea

Please sign in to comment.