demo · v131

Shared icon library via external `clip-path` and `marker`

Pre-131 every page that wanted SVG icons via clip-path had to inline the <defs>. With external SVG resource refs you can ship one icon sheet at /icons.svg and reference fragments from every page. Six icons below all derive from one external SVG, plus an arrow with cross-doc marker-end.

star

heart

bookmark

bell

shield

bolt

and a marker reference

the css

/* before 131 - had to inline the <defs> */
.icon { clip-path: url("#star"); }
/* the <svg><defs>...</defs></svg> lived in every page */

/* 131 - external file */
.icon { clip-path: url("/icons.svg#star"); }
/* one sheet for the whole site */

This demo uses a data-URL SVG instead of a separate /icons.svg so the demo is self-contained, but the mechanism is identical.

and a marker reference

the css

see also