<svg class="di di-search">
<use href="../../dso-icons.svg#search" />
</svg>
<svg class="di di-{{ icon }}">
<use href="{{path '/dso-icons.svg' }}#{{ first (split icon ' ') }}" />
</svg>
icon: search
- Handle: @icon--search
- Variants (34): Angle Down , Angle Left , Angle Right , Angle Up , At , Bars , Calendar , Caret Down , Check , Chevron Down , Chevron Left , Chevron Right , Chevron Up , Circle Notch , Copy , Download , External Link , Forbidden , Info Active , Info , Paperclip , Pencil , Plus , Redo , Search , Status Danger , Status Info , Status Success , Status Warning , Times , Trash , User , Users , Wip Wip
- Preview:
- Filesystem Path: components\04-indicators\icon\icon.hbs
- Een namespace attribuut is niet nodig als het icoon in een HTML5 applicatie wordt gebruikt (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg).
- In het
useelement mag directhrefipvxlink:hrefworden gebruikt. In SVG2 isxlink:hrefdeprecated (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href). - In bovenstaand voorbeeld verwijs ik naar
dso-icons.svg:- Als de toolkit scss files worden gecompileerd, moet de implementatie zorg dragen dat uiteindelijk
node_modules/dso-toolkit/dist/library/dso-icons.svgwordt gebundled; - Als de toolkit via de CDN wordt gebruikt werken SVG iconen direct;
- Als de toolkit de CSS uit de NPM package gebruikt moeten de bundlers/loaders rekening houden dat de SVG files worden meegenomen in de build;
- Als de toolkit scss files worden gecompileerd, moet de implementatie zorg dragen dat uiteindelijk
- IE11 heeft geen support voor
use hrefnaar een externe URI of data URI. Elke implementatie van de toolkit moet deze tekortkoming compenseren. De library is ook een implementatie van de toolkit en maakt gebruik van www.dso-toolkit.nl) maakt gebruik van svg4everybody.