Eigene SVG Icons
Hier eine kurze Anleitung bezüglich SVG Files in Gutenberg.

Eigenes SVG

Falls du ein Icon in Gutenberg einbauen möchtest, ist es empfohlen dies als Funktion abzuspeichern, um sie dann in anderen Dateien zu importieren zu können.
Wichtig ist, dass das SVG JSV konform ist. Dafür gibt es einen tollen Generator, der wirklich das abdeckt und dir ein sauberes kompatibles SVG liefert. Hier geht es zum Generator.

Hier ein Beispiel:

1
export function icon() {
2
3
/*
4
* Define inline CSS to the Icon
5
*/
6
let styles = {
7
margin : '0 10px',
8
width : '20px',
9
height : '20px'
10
};
11
12
/*
13
* Return SVG Image with inline CSS
14
* SVG to JSX Compiler: https://svg2jsx.herokuapp.com
15
* Use the attribute style={styles} to return all css defin.
16
*/
17
return (
18
<svg style={styles} viewBox="0 0 24 24">
19
<Path fill="none" d="M0 0h24v24H0V0z" />
20
<G>
21
<Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" />
22
<Path d="M12 12l1 2 3-3 3 4H9z" />
23
<Path d="M2 6v14l2 2h14v-2H4V6H2z" />
24
</G>
25
</svg>
26
);
27
}
Copied!

WordPress SVG Component

Gutenberg hat schon eine interne SVG Function, die du verwenden kannst: Weitere Informationen findest du in der offiziellen Doku. Hier geht es zur Doku!
1
import { G, Path, SVG } from '@wordpress/components';
2
3
const MyIcon = () => (
4
<SVG
5
viewBox="0 0 24 24"
6
xmlns="http://www.w3.org/2000/svg"
7
>
8
<Path fill="none" d="M0 0h24v24H0V0z" />
9
<G>
10
<Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" />
11
<Path d="M12 12l1 2 3-3 3 4H9z" />
12
<Path d="M2 6v14l2 2h14v-2H4V6H2z" />
13
</G>
14
</SVG>
15
);
Copied!
Last modified 2yr ago
Export as PDF
Copy link