Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improve svg sprites #13

Merged
merged 7 commits into from
Apr 4, 2018
Merged

improve svg sprites #13

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
157cf4c
Optimize svg icons in sprite
cyrilwanner Apr 4, 2018
705fbec
Add example for server-side rendering for svg-sprites to the readme
cyrilwanner Apr 4, 2018
a1b689e
Create a runtime generator for the svg sprite icons for easier use
cyrilwanner Apr 4, 2018
86db336
Update readme with recent changes to the svg sprites
cyrilwanner Apr 4, 2018
e9a7aae
Add svg sprites to the features list
cyrilwanner Apr 4, 2018
55285ff
Remove console log
cyrilwanner Apr 4, 2018
1789da0
Correct local path of svg-runtime-generator.js
cyrilwanner Apr 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add example for server-side rendering for svg-sprites to the readme
  • Loading branch information
@cyrilwanner
cyrilwanner committed Apr 4, 2018
commit 705fbec3f39bd15b0c2d289153cd219e4c3e3410
45 changes: 40 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ You can use both variants directly on an image in the `src` attribute or in your
### Query params

There are some cases where you don't want to reference a file or get a base64 data-uri but you actually want to include the raw file directly into your html.
Specially for svgs because you can't style them with css if they are in a `src` attribute on an image.
Especially for svgs because you can't style them with css if they are in an `src` attribute on an image.

So there are additional options you can specify as query params when you import the images:

Expand Down Expand Up @@ -202,8 +202,8 @@ The inlining will only get applied to exactly this import, so if you import the
#### ?sprite

If you need to style or animate your SVGs [?include](#?include) might be the wrong option, because that ends up in a lot of DOM elements, especially when using the SVG in list-items etc.
In that case you can use `?sprite` which uses [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) to render and inject an SVG sprite in the page automatically.
You just refer to images via `<svg><use xlink:href="#id"></use></svg>`
In that case, you can use `?sprite` which uses [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) to render and inject an SVG sprite in the page automatically.
You just refer to images via `<svg><use xlink:href="#id"></use></svg>`

```javascript
import React from 'react';
Expand All @@ -216,6 +216,41 @@ export default () => (
);
```

To also make this work for server-side rendering, you need to add these changes to your `_document.jsx` file (read [here](https://github.com/zeit/next.js#custom-document) if you don't have this file yet):

```javascript
// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document';
import sprite from 'svg-sprite-loader/runtime/sprite.build';

export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const pageProps = renderPage();

const spriteContent = sprite.stringify(); // stringify all sprites used in the current page
sprite.destroy(); // cleanup global sprites after the page is rendered

return {
spriteContent,
...pageProps,
};
}

render() {
return (
<html>
<Head>{/* your head if needed */}</Head>
<body>
<div dangerouslySetInnerHTML={{ __html: this.props.spriteContent }} />
<Main />
<NextScript />
</body>
</html>
);
}
}
```

## Configuration

This plugin uses [img-loader](https://www.npmjs.com/package/img-loader) under the hood which is based on [mozjpeg](https://github.com/imagemin/imagemin-mozjpeg), [optipng](https://github.com/imagemin/imagemin-optipng), [gifsicle](https://github.com/imagemin/imagemin-gifsicle) and [svgo](https://github.com/imagemin/imagemin-svgo).
Expand Down Expand Up @@ -260,7 +295,7 @@ The output path that should be used for images. This can be used to have a custo
Type: `string`<br>
Default: `'[name]-[hash].[ext]'`

Filename of the optimized images.
The filename of the optimized images.
Make sure you keep the `[hash]` part so they receive a new filename if the content changes.

#### optimizeImagesInDev
Expand Down Expand Up @@ -358,7 +393,7 @@ If you want webp images to be handled but _not_ optimized, you can set this valu

The options specified here are the **default** values.

So if the are good enough for your use-case, you don't have to specify them to have a shorter and cleaner `next.config.js` file.
So if they are good enough for your use-case, you don't have to specify them to have a shorter and cleaner `next.config.js` file.

```javascript
// next.config.js
Expand Down