DSO Toolkit | Component Library

Icon 

<!-- Air -->
<svg class="di di-air">
    <use href="../../dso-icons.svg#air" />
</svg>


<!-- Angle Down -->
<svg class="di di-angle-down">
    <use href="../../dso-icons.svg#angle-down" />
</svg>


<!-- Angle Left -->
<svg class="di di-angle-left">
    <use href="../../dso-icons.svg#angle-left" />
</svg>


<!-- Angle Right -->
<svg class="di di-angle-right">
    <use href="../../dso-icons.svg#angle-right" />
</svg>


<!-- Angle Up -->
<svg class="di di-angle-up">
    <use href="../../dso-icons.svg#angle-up" />
</svg>


<!-- Bars -->
<svg class="di di-bars">
    <use href="../../dso-icons.svg#bars" />
</svg>


<!-- Buildings -->
<svg class="di di-buildings">
    <use href="../../dso-icons.svg#buildings" />
</svg>


<!-- Calendar -->
<svg class="di di-calendar">
    <use href="../../dso-icons.svg#calendar" />
</svg>


<!-- Caret Down -->
<svg class="di di-caret-down">
    <use href="../../dso-icons.svg#caret-down" />
</svg>


<!-- Check -->
<svg class="di di-check">
    <use href="../../dso-icons.svg#check" />
</svg>


<!-- Chevron Down -->
<svg class="di di-chevron-down">
    <use href="../../dso-icons.svg#chevron-down" />
</svg>


<!-- Chevron Left -->
<svg class="di di-chevron-left">
    <use href="../../dso-icons.svg#chevron-left" />
</svg>


<!-- Chevron Right -->
<svg class="di di-chevron-right">
    <use href="../../dso-icons.svg#chevron-right" />
</svg>


<!-- Chevron Up -->
<svg class="di di-chevron-up">
    <use href="../../dso-icons.svg#chevron-up" />
</svg>


<!-- Circle Notch -->
<svg class="di di-circle-notch">
    <use href="../../dso-icons.svg#circle-notch" />
</svg>


<!-- Copy -->
<svg class="di di-copy">
    <use href="../../dso-icons.svg#copy" />
</svg>


<!-- Crown -->
<svg class="di di-crown">
    <use href="../../dso-icons.svg#crown" />
</svg>


<!-- Cultural -->
<svg class="di di-cultural">
    <use href="../../dso-icons.svg#cultural" />
</svg>


<!-- Download -->
<svg class="di di-download">
    <use href="../../dso-icons.svg#download" />
</svg>


<!-- Exclamation -->
<svg class="di di-exclamation">
    <use href="../../dso-icons.svg#exclamation" />
</svg>


<!-- External Link -->
<svg class="di di-external-link">
    <use href="../../dso-icons.svg#external-link" />
</svg>


<!-- Eye Slash -->
<svg class="di di-eye-slash">
    <use href="../../dso-icons.svg#eye-slash" />
</svg>


<!-- Eye -->
<svg class="di di-eye">
    <use href="../../dso-icons.svg#eye" />
</svg>


<!-- Filter -->
<svg class="di di-filter">
    <use href="../../dso-icons.svg#filter" />
</svg>


<!-- Forbidden Outline -->
<svg class="di di-forbidden-outline">
    <use href="../../dso-icons.svg#forbidden-outline" />
</svg>


<!-- Forbidden -->
<svg class="di di-forbidden">
    <use href="../../dso-icons.svg#forbidden" />
</svg>


<!-- House -->
<svg class="di di-house">
    <use href="../../dso-icons.svg#house" />
</svg>


<!-- Info Active -->
<svg class="di di-info-active">
    <use href="../../dso-icons.svg#info-active" />
</svg>


<!-- Info I -->
<svg class="di di-info-i">
    <use href="../../dso-icons.svg#info-i" />
</svg>


<!-- Info -->
<svg class="di di-info">
    <use href="../../dso-icons.svg#info" />
</svg>


<!-- Infrastructure -->
<svg class="di di-infrastructure">
    <use href="../../dso-icons.svg#infrastructure" />
</svg>


<!-- Landscape -->
<svg class="di di-landscape">
    <use href="../../dso-icons.svg#landscape" />
</svg>


<!-- Lock -->
<svg class="di di-lock">
    <use href="../../dso-icons.svg#lock" />
</svg>


<!-- Magnet -->
<svg class="di di-magnet">
    <use href="../../dso-icons.svg#magnet" />
</svg>


<!-- Minus Square -->
<svg class="di di-minus-square">
    <use href="../../dso-icons.svg#minus-square" />
</svg>


<!-- Municipality -->
<svg class="di di-municipality">
    <use href="../../dso-icons.svg#municipality" />
</svg>


<!-- Nature -->
<svg class="di di-nature">
    <use href="../../dso-icons.svg#nature" />
</svg>


<!-- Paperclip -->
<svg class="di di-paperclip">
    <use href="../../dso-icons.svg#paperclip" />
</svg>


<!-- Parking -->
<svg class="di di-parking">
    <use href="../../dso-icons.svg#parking" />
</svg>


<!-- Pencil -->
<svg class="di di-pencil">
    <use href="../../dso-icons.svg#pencil" />
</svg>


<!-- Plus Square -->
<svg class="di di-plus-square">
    <use href="../../dso-icons.svg#plus-square" />
</svg>


<!-- Plus -->
<svg class="di di-plus">
    <use href="../../dso-icons.svg#plus" />
</svg>


<!-- Print -->
<svg class="di di-print">
    <use href="../../dso-icons.svg#print" />
</svg>


<!-- Redo -->
<svg class="di di-redo">
    <use href="../../dso-icons.svg#redo" />
</svg>


<!-- Search -->
<svg class="di di-search">
    <use href="../../dso-icons.svg#search" />
</svg>


<!-- Sitemap -->
<svg class="di di-sitemap">
    <use href="../../dso-icons.svg#sitemap" />
</svg>


<!-- Soil -->
<svg class="di di-soil">
    <use href="../../dso-icons.svg#soil" />
</svg>


<!-- Sort -->
<svg class="di di-sort">
    <use href="../../dso-icons.svg#sort" />
</svg>


<!-- Status Danger Outline -->
<svg class="di di-status-danger-outline">
    <use href="../../dso-icons.svg#status-danger-outline" />
</svg>


<!-- Status Danger -->
<svg class="di di-status-danger">
    <use href="../../dso-icons.svg#status-danger" />
</svg>


<!-- Status Info Outline -->
<svg class="di di-status-info-outline">
    <use href="../../dso-icons.svg#status-info-outline" />
</svg>


<!-- Status Info -->
<svg class="di di-status-info">
    <use href="../../dso-icons.svg#status-info" />
</svg>


<!-- Status Success Outline -->
<svg class="di di-status-success-outline">
    <use href="../../dso-icons.svg#status-success-outline" />
</svg>


<!-- Status Success -->
<svg class="di di-status-success">
    <use href="../../dso-icons.svg#status-success" />
</svg>


<!-- Status Warning Outline -->
<svg class="di di-status-warning-outline">
    <use href="../../dso-icons.svg#status-warning-outline" />
</svg>


<!-- Status Warning -->
<svg class="di di-status-warning">
    <use href="../../dso-icons.svg#status-warning" />
</svg>


<!-- Table -->
<svg class="di di-table">
    <use href="../../dso-icons.svg#table" />
</svg>


<!-- Times -->
<svg class="di di-times">
    <use href="../../dso-icons.svg#times" />
</svg>


<!-- Trash -->
<svg class="di di-trash">
    <use href="../../dso-icons.svg#trash" />
</svg>


<!-- Undo -->
<svg class="di di-undo">
    <use href="../../dso-icons.svg#undo" />
</svg>


<!-- User Line -->
<svg class="di di-user-line">
    <use href="../../dso-icons.svg#user-line" />
</svg>


<!-- User -->
<svg class="di di-user">
    <use href="../../dso-icons.svg#user" />
</svg>


<!-- Users -->
<svg class="di di-users">
    <use href="../../dso-icons.svg#users" />
</svg>


<!-- Water -->
<svg class="di di-water">
    <use href="../../dso-icons.svg#water" />
</svg>


<!-- Wip Wip -->
<svg class="di di-wip-wip">
    <use href="../../dso-icons.svg#wip-wip" />
</svg>


<svg class="di di-{{ icon }}">
  <use href="{{path '/dso-icons.svg' }}#{{ first (split icon ' ') }}" />
</svg>
 
/* Air */
icon: air



/* Angle Down */
icon: angle-down



/* Angle Left */
icon: angle-left



/* Angle Right */
icon: angle-right



/* Angle Up */
icon: angle-up



/* Bars */
icon: bars



/* Buildings */
icon: buildings



/* Calendar */
icon: calendar



/* Caret Down */
icon: caret-down



/* Check */
icon: check



/* Chevron Down */
icon: chevron-down



/* Chevron Left */
icon: chevron-left



/* Chevron Right */
icon: chevron-right



/* Chevron Up */
icon: chevron-up



/* Circle Notch */
icon: circle-notch



/* Copy */
icon: copy



/* Crown */
icon: crown



/* Cultural */
icon: cultural



/* Download */
icon: download



/* Exclamation */
icon: exclamation



/* External Link */
icon: external-link



/* Eye Slash */
icon: eye-slash



/* Eye */
icon: eye



/* Filter */
icon: filter



/* Forbidden Outline */
icon: forbidden-outline



/* Forbidden */
icon: forbidden



/* House */
icon: house



/* Info Active */
icon: info-active



/* Info I */
icon: info-i



/* Info */
icon: info



/* Infrastructure */
icon: infrastructure



/* Landscape */
icon: landscape



/* Lock */
icon: lock



/* Magnet */
icon: magnet



/* Minus Square */
icon: minus-square



/* Municipality */
icon: municipality



/* Nature */
icon: nature



/* Paperclip */
icon: paperclip



/* Parking */
icon: parking



/* Pencil */
icon: pencil



/* Plus Square */
icon: plus-square



/* Plus */
icon: plus



/* Print */
icon: print



/* Redo */
icon: redo



/* Search */
icon: search



/* Sitemap */
icon: sitemap



/* Soil */
icon: soil



/* Sort */
icon: sort



/* Status Danger Outline */
icon: status-danger-outline



/* Status Danger */
icon: status-danger



/* Status Info Outline */
icon: status-info-outline



/* Status Info */
icon: status-info



/* Status Success Outline */
icon: status-success-outline



/* Status Success */
icon: status-success



/* Status Warning Outline */
icon: status-warning-outline



/* Status Warning */
icon: status-warning



/* Table */
icon: table



/* Times */
icon: times



/* Trash */
icon: trash



/* Undo */
icon: undo



/* User Line */
icon: user-line



/* User */
icon: user



/* Users */
icon: users



/* Water */
icon: water



/* Wip Wip */
icon: wip-wip
  • 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 use element mag direct href ipv xlink:href worden gebruikt. In SVG2 is xlink:href deprecated (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.svg wordt 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;
  • IE11 heeft geen support voor use href naar 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.