Development guide

Iconen

De site maakt op 2 manieren gebruik van iconen: Font-Awesome voor de reguliere icoontjes en een icon sprite voor alle Vektis iconen. Klik hier voor de documentatie met betrekking tot Font-Awesome.

De Vektis iconen op de site staan samengevoegd in een sprite die gegenereerd wordt door Laravel Mix. Deze iconen worden uit de map 'resources/assets/svg-icons' gehaald op basis van de lijst in 'resources/assets/sass/modules/_icons.scss' verwerkt tot een sprite.

De grootte en kleur van de iconen is afhankelijk van de tekst-eigenschappen op de locatie waar de icoon geplaatst wordt. Dit is vergelijkbaar met hoe een icon font werkt.


Implementatie

Er zijn 2 manieren om iconen te gebruiken in de templates:

  • PHP Functie: icon('icon-id')
  • Blade directive: @icon('icon-id')

De blade directive wordt gebruikt op de meeste locaties. De PHP functie kan gebruikt worden indien een icoon meegegeven moet worden in een variabele zoals bij een Blade component het geval is.

Voorbeelden:

{{ icon('chevron-right') }}

@icon('chevron-right')

Beschikbare iconen

De volgende iconen zitten op dit moment in de sprite. Door op een icoon te klikken wordt het desbetreffende id gekopieerd.

@icon('face-tired')
face-tired
@icon('face-frown')
face-frown
@icon('face-meh')
face-meh
@icon('face-smile-beam')
face-smile-beam
@icon('face-laugh-beam')
face-laugh-beam
@icon('werken-bij--icon-1')
werken-bij--icon-1
@icon('werken-bij--icon-2')
werken-bij--icon-2
@icon('werken-bij--icon-3')
werken-bij--icon-3
@icon('werken-bij--icon-4')
werken-bij--icon-4
@icon('werken-bij--icon-5')
werken-bij--icon-5
@icon('werken-bij--icon-6')
werken-bij--icon-6
@icon('werken-bij--icon-7')
werken-bij--icon-7
@icon('abacus')
abacus
@icon('caregiver-circle-m')
caregiver-circle-m
@icon('caregiver-circle-f')
caregiver-circle-f
@icon('locations')
locations
@icon('megaphone')
megaphone
@icon('chat-balloon')
chat-balloon
@icon('download-arrow')
download-arrow
@icon('download-excel')
download-excel
@icon('power-bi')
power-bi
@icon('angle-down')
angle-down
@icon('angle-left')
angle-left
@icon('angle-right')
angle-right
@icon('angle-up')
angle-up
@icon('arrow-down')
arrow-down
@icon('arrow-down-to-line')
arrow-down-to-line
@icon('arrow-up-from-bracket')
arrow-up-from-bracket
@icon('arrow-up-right-from-square')
arrow-up-right-from-square
@icon('ban')
ban
@icon('bullhorn')
bullhorn
@icon('calendar-days')
calendar-days
@icon('chart-simple')
chart-simple
@icon('check')
check
@icon('check-circle')
check-circle
@icon('chevron-down')
chevron-down
@icon('chevron-left')
chevron-left
@icon('chevron-right')
chevron-right
@icon('chevron-up')
chevron-up
@icon('circle-notch')
circle-notch
@icon('clock-o')
clock-o
@icon('clock')
clock
@icon('clock-rotate-left')
clock-rotate-left
@icon('coins')
coins
@icon('copy')
copy
@icon('comment-question')
comment-question
@icon('comment')
comment
@icon('euro-alt')
euro-alt
@icon('exclamation-circle')
exclamation-circle
@icon('exclamation-triangle')
exclamation-triangle
@icon('eye-alt')
eye-alt
@icon('facebook')
facebook
@icon('fax')
fax
@icon('globe')
globe
@icon('home')
home
@icon('info-circle')
info-circle
@icon('layer-group')
layer-group
@icon('linkedin-square')
linkedin-square
@icon('linkedin')
linkedin
@icon('location-dot')
location-dot
@icon('message-lines')
message-lines
@icon('minus-circle')
minus-circle
@icon('newspaper')
newspaper
@icon('paper-plane')
paper-plane
@icon('paperclip')
paperclip
@icon('pen')
pen
@icon('pencil')
pencil
@icon('phone-alt')
phone-alt
@icon('play-circle')
play-circle
@icon('plus')
plus
@icon('plus-circle')
plus-circle
@icon('rectangle-list')
rectangle-list
@icon('refresh')
refresh
@icon('right-from-bracket')
right-from-bracket
@icon('sliders')
sliders
@icon('spinner')
spinner
@icon('table')
table
@icon('tag')
tag
@icon('times')
times
@icon('trash')
trash
@icon('trash-o')
trash-o
@icon('twitter-square')
twitter-square
@icon('twitter')
twitter
@icon('user-alt')
user-alt
@icon('users')
users
@icon('whatsapp')
whatsapp
@icon('x-twitter')
x-twitter
@icon('youtube-square')
youtube-square
@icon('youtube')
youtube
@icon('brain')
brain
@icon('hospital')
hospital
@icon('person-elderly')
person-elderly
@icon('caregiver')
caregiver
@icon('document-medical')
document-medical
@icon('cloud-download')
cloud-download
@icon('crossing-arrows')
crossing-arrows
@icon('shield-check')
shield-check
@icon('compass')
compass
@icon('lightbulb')
lightbulb
@icon('gear')
gear
@icon('chains')
chains
@icon('documents')
documents
@icon('flag-check')
flag-check
@icon('calendar')
calendar
@icon('hand-wave')
hand-wave
@icon('question')
question
@icon('business-man')
business-man
@icon('business-men')
business-men
@icon('checklist')
checklist
@icon('speech-bubble')
speech-bubble
@icon('checklist-squares')
checklist-squares
@icon('documents-doc')
documents-doc
@icon('monitor-check')
monitor-check
@icon('document')
document
@icon('speech-bubble-conversation')
speech-bubble-conversation
@icon('documents-check')
documents-check
@icon('search')
search
@icon('document-question-mark')
document-question-mark
@icon('documents-std')
documents-std
@icon('envelope')
envelope
@icon('phone')
phone
@icon('man-woman')
man-woman
@icon('wrench')
wrench
@icon('medicin-bottle')
medicin-bottle
@icon('hospital-bed')
hospital-bed
@icon('ribbon')
ribbon
@icon('flag-checkered')
flag-checkered
@icon('calculator')
calculator
@icon('eye')
eye
@icon('euro')
euro
@icon('person-blind')
person-blind
@icon('graph')
graph
@icon('person-pregnant')
person-pregnant
@icon('syringe')
syringe
@icon('keyhole')
keyhole
@icon('map-netherlands-marker')
map-netherlands-marker
@icon('person-hospital')
person-hospital
@icon('route')
route
@icon('map-marker')
map-marker
@icon('test-tube')
test-tube
@icon('graduate-hat')
graduate-hat
@icon('band-aid')
band-aid
@icon('book')
book
@icon('building')
building
@icon('chain')
chain
@icon('ecg')
ecg
@icon('dna')
dna
@icon('heart')
heart
@icon('ball')
ball
@icon('tooth')
tooth
@icon('map-netherlands')
map-netherlands
@icon('physical-therapy')
physical-therapy
@icon('search-document')
search-document
@icon('stethoscope')
stethoscope
@icon('person-male')
person-male
@icon('user')
user
@icon('house')
house
@icon('talking')
talking
@icon('person-house')
person-house
@icon('brain-circle-duotone')
brain-circle-duotone
@icon('hospital-circle-duotone')
hospital-circle-duotone
@icon('person-elderly-circle-duotone')
person-elderly-circle-duotone
@icon('caregiver-circle-duotone')
caregiver-circle-duotone
@icon('document-medical-circle-duotone')
document-medical-circle-duotone
@icon('cloud-download-circle-duotone')
cloud-download-circle-duotone
@icon('crossing-arrows-circle-duotone')
crossing-arrows-circle-duotone
@icon('shield-check-circle-duotone')
shield-check-circle-duotone
@icon('compass-circle-duotone')
compass-circle-duotone
@icon('lightbulb-circle-duotone')
lightbulb-circle-duotone
@icon('gear-circle-duotone')
gear-circle-duotone
@icon('chains-circle-duotone')
chains-circle-duotone
@icon('documents-circle-duotone')
documents-circle-duotone
@icon('flag-check-circle-duotone')
flag-check-circle-duotone
@icon('calendar-circle-duotone')
calendar-circle-duotone
@icon('hand-wave-circle-duotone')
hand-wave-circle-duotone
@icon('question-circle-duotone')
question-circle-duotone
@icon('business-man-circle-duotone')
business-man-circle-duotone
@icon('business-men-circle-duotone')
business-men-circle-duotone
@icon('checklist-circle-duotone')
checklist-circle-duotone
@icon('speech-bubble-circle-duotone')
speech-bubble-circle-duotone
@icon('checklist-squares-circle-duotone')
checklist-squares-circle-duotone
@icon('documents-doc-circle-duotone')
documents-doc-circle-duotone
@icon('monitor-check-circle-duotone')
monitor-check-circle-duotone
@icon('document-circle-duotone')
document-circle-duotone
@icon('speech-bubble-conversation-circle-duotone')
speech-bubble-conversation-circle-duotone
@icon('documents-check-circle-duotone')
documents-check-circle-duotone
@icon('search-circle-duotone')
search-circle-duotone
@icon('document-question-mark-circle-duotone')
document-question-mark-circle-duotone
@icon('documents-std-circle-duotone')
documents-std-circle-duotone
@icon('envelope-circle-duotone')
envelope-circle-duotone
@icon('phone-circle-duotone')
phone-circle-duotone
@icon('man-woman-circle-duotone')
man-woman-circle-duotone
@icon('wrench-circle-duotone')
wrench-circle-duotone
@icon('medicin-bottle-circle-duotone')
medicin-bottle-circle-duotone
@icon('hospital-bed-circle-duotone')
hospital-bed-circle-duotone
@icon('ribbon-circle-duotone')
ribbon-circle-duotone
@icon('flag-checkered-circle-duotone')
flag-checkered-circle-duotone
@icon('calculator-circle-duotone')
calculator-circle-duotone
@icon('eye-circle-duotone')
eye-circle-duotone
@icon('euro-circle-duotone')
euro-circle-duotone
@icon('person-blind-circle-duotone')
person-blind-circle-duotone
@icon('graph-circle-duotone')
graph-circle-duotone
@icon('person-pregnant-circle-duotone')
person-pregnant-circle-duotone
@icon('syringe-circle-duotone')
syringe-circle-duotone
@icon('keyhole-circle-duotone')
keyhole-circle-duotone
@icon('map-netherlands-marker-circle-duotone')
map-netherlands-marker-circle-duotone
@icon('person-hospital-circle-duotone')
person-hospital-circle-duotone
@icon('route-circle-duotone')
route-circle-duotone
@icon('map-marker-circle-duotone')
map-marker-circle-duotone
@icon('test-tube-circle-duotone')
test-tube-circle-duotone
@icon('graduate-hat-circle-duotone')
graduate-hat-circle-duotone
@icon('band-aid-circle-duotone')
band-aid-circle-duotone
@icon('book-circle-duotone')
book-circle-duotone
@icon('building-circle-duotone')
building-circle-duotone
@icon('chain-circle-duotone')
chain-circle-duotone
@icon('ecg-circle-duotone')
ecg-circle-duotone
@icon('dna-circle-duotone')
dna-circle-duotone
@icon('heart-circle-duotone')
heart-circle-duotone
@icon('ball-circle-duotone')
ball-circle-duotone
@icon('tooth-circle-duotone')
tooth-circle-duotone
@icon('map-netherlands-circle-duotone')
map-netherlands-circle-duotone
@icon('physical-therapy-circle-duotone')
physical-therapy-circle-duotone
@icon('search-document-circle-duotone')
search-document-circle-duotone
@icon('stethoscope-circle-duotone')
stethoscope-circle-duotone
@icon('person-male-circle-duotone')
person-male-circle-duotone
@icon('user-circle-duotone')
user-circle-duotone

Iconen toevoegen

Om zelf iconen aan de sprite toe te voegen moeten de volgende stappen genomen worden.

  1. Bewaar een icoon bij voorkeur op een 1:1 canvas als een compound path in de map 'resources/assets/svg-icons'. Indien er geen 1:1 ratio mogelijk is, dan moeten de breedte en hoogte apart ingesteld worden.
  2. Minificeer dit icoon met behulp van Imageoptimizer
  3. Als er een compound path is, bestaat het hele icoon uit 1 path. Geef dit path het volgende attribuut: fill="currentColor"
  4. Kopieer de naam van dit bestand zonder de extensie en plaats deze in 'resources/assets/sass/modules/_icons.scss'
  5. Indien er een afwijkende ratio is gebruikt voor de canvas moeten de hoogte en breedte van het icoon ook ingesteld worden: 'arrow-up':('w': 12, 'h': 16)
  6. Na het compileren van de assets met Laravel Mix is het nieuwe icoon toegevoegd aan de sprite en kan deze gebruikt worden.

Voorbeeld SVG code:

<svg enable-background="new 0 0 8 16" height="16" viewBox="0 0 8 16" width="8" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin meet"><path fill="currentColor" d="m1.324 14c-.3986 0-.7971-.2006-.9964-.5015-.4982-.6018-.3986-1.4043.0996-1.9058l4.185-3.611-4.0853-3.611c-.5979-.5016-.6976-1.4044-.1994-1.9059.4982-.6018 1.2953-.6018 1.8932-.1003l5.281 4.6141c.299.2006.4983.6018.4983 1.003s-.1993.8025-.4982 1.0031l-5.281 4.6141c-.1993.3009-.4983.4012-.8968.4012z"/></svg>

Vektis dependencies

Op dit moment worden door Vektis iconen geuploadt in het CMS. Alle iconen zijn ook beschikbaar in de sprite. Om de relatie te onderhouden wordt in config/icons.php bijgehouden hoe een icoon in het CMS van Vektis heet en welke naamgeving deze heeft in de Sprite. Dit bestand kan ook gebruikt worden als basis om SCSS te genereren.

SCSS:

// Place the names of the icons in this variable
// File mapping can be found in config/icons.php
$svg-icons: (
    // Start emoticons
    'face-tired': (),
    'face-frown': (),
    'face-meh': (),
    'face-smile-beam': (),
    'face-laugh-beam': (),
    // End emoticons

    // Start Vacancies icons
    'werken-bij--icon-1': (),
    'werken-bij--icon-2': ('w': 54, 'h': 34),
    'werken-bij--icon-3': ('w': 59, 'h': 36),
    'werken-bij--icon-4': (),
    'werken-bij--icon-5': ('w': 57, 'h': 43),
    'werken-bij--icon-6': ('w': 57, 'h': 47),
    'werken-bij--icon-7': ('w': 57, 'h': 43),
    // End Vacancies icons

    // Start Custom icons
    'abacus': (),
    'caregiver-circle-m': (),
    'caregiver-circle-f': (),
    'locations': (),
    'megaphone': (), // Same as bullhorn
    'chat-balloon': (),
    'download-arrow': (),
    'download-excel': ('w': 19, 'h': 22),
    'power-bi': (),
    // End Custom icons

    // Start Fontawesome
    'angle-down': ('w': 16, 'h': 14),
    'angle-left': ('w': 10, 'h': 16),
    'angle-right': ('w': 10, 'h': 16),
    'angle-up': ('w': 16, 'h': 14),
    'arrow-down': ('w': 12, 'h': 16),
    'arrow-down-to-line': ('w': 12, 'h': 16),
    'arrow-up-from-bracket': ('w': 14, 'h': 16),
    'arrow-up-right-from-square': (),
    'ban': (),
    'bullhorn': (),
    'calendar-days': (),
    'chart-simple': (),
    'check': ('w': 14, 'h': 16),
    'check-circle': (),
    'chevron-down': (),
    'chevron-left': ('w': 10, 'h': 16),
    'chevron-right': ('w': 10, 'h': 16),
    'chevron-up': (),
    'circle-notch': (),
    'clock-o': (),
    'clock': (),
    'clock-rotate-left': (),
    'coins': (),
    'copy': ('w': 14, 'h': 16),
    'comment-question': (),
    'comment': (),
    'euro-alt': ('w': 10, 'h': 16),
    'exclamation-circle': (),
    'exclamation-triangle': (),
    'eye-alt': ('w': 18, 'h': 16), // was originally "eye", but conflicts with vektis' eye icon
    'facebook': ('w': 10, 'h': 16),
    'fax': (),
    'globe': (),
    'home':  ('w': 18, 'h': 16),
    'info-circle': (),
    'layer-group': (),
    'linkedin-square': (),
    'linkedin': (),
    'location-dot': ('w': 12, 'h': 16),
    'message-lines': (),
    'minus-circle': (),
    'newspaper': (),
    'paper-plane': (),
    'paperclip': ('w': 14, 'h': 16),
    'pen': (),
    'pencil': (), // Same as "pen"
    'phone-alt': (), // was originally "phone", but conflicts with vektis' phone icon
    'play-circle': (),
    'plus': ('w': 14, 'h': 16),
    'plus-circle': (),
    'rectangle-list': ('w': 576, 'h': 512),
    'refresh': (),
    'right-from-bracket': (),
    'sliders': (),
    'spinner': (),
    'table': (),
    'tag': (),
    'times': ('w': 12, 'h': 16),
    'trash': ('w': 14, 'h': 16),
    'trash-o': ('w': 14, 'h': 16),
    'twitter-square': (),
    'twitter': (),
    'user-alt': ('w': 448, 'h': 512), // was originally "user", but conflicts with vektis' user icon
    'users': ('w': 640, 'h': 512),
    'whatsapp': (),
    'x-twitter': (),
    'youtube-square': ('w': 14, 'h': 16),
    'youtube': ('w': 18, 'h': 16),

    // End Fontawesome

    // Vektis Icons, can be copied from http://www.vektis.nl/style-guide/icons. Doubles are removed
    'brain': (), // Vektis_Icoon_A01_RGB.svg
    'hospital': (), // Vektis_Icoon_A02_RGB.svg
    'person-elderly': (), // Vektis_Icoon_A03_RGB.svg
    'caregiver': (), // Vektis_Icoon_A04_RGB.svg
    'document-medical': (), // Vektis_Icoon_A05_RGB.svg
    'cloud-download': (), // Vektis_Icoon_A06_RGB.svg
    'crossing-arrows': (), // Vektis_Icoon_A07_RGB.svg
    'shield-check': (), // Vektis_Icoon_A08_RGB.svg
    'compass': (), // Vektis_Icoon_A09_RGB.svg
    'lightbulb': (), // Vektis_Icoon_A10_RGB.svg
    'gear': (), // Vektis_Icoon_A11_RGB.svg
    'chains': (), // Vektis_Icoon_A12_RGB.svg
    'documents': (), // Vektis_Icoon_A13_RGB.svg
    'flag-check': (), // Vektis_Icoon_A14_RGB.svg
    'calendar': (), // Vektis_Icoon_A15_RGB.svg
    'hand-wave': (), // Vektis_Icoon_A16_RGB.svg
    'question': (), // Vektis_Icoon_A17_RGB.svg
    'business-man': (), // Vektis_Icoon_A18_RGB.svg
    'business-men': (), // Vektis_Icoon_A19_RGB.svg
    'checklist': (), // Vektis_Icoon_A20_RGB.svg
    'speech-bubble': (), // Vektis_Icoon_A21_RGB.svg
    'checklist-squares': (), // Vektis_Icoon_A22_RGB.svg
    'documents-doc': (), // Vektis_Icoon_A23_RGB.svg
    'monitor-check': (), // Vektis_Icoon_A24_RGB.svg
    'document': (), // Vektis_Icoon_A25_RGB.svg
    'speech-bubble-conversation': (), // Vektis_Icoon_A26_RGB.svg
    'documents-check': (), // Vektis_Icoon_A28_RGB.svg
    'search': (), // Vektis_Icoon_A29_RGB.svg
    'document-question-mark': (), // Vektis_Icoon_A30_RGB.svg
    'documents-std': (), // Vektis_Icoon_A31_RGB.svg
    'envelope': (), // Vektis_Icoon_A32_RGB.svg
    'phone': (), // Vektis_Icoon_A33_RGB.svg
    'man-woman': (), // Vektis_Icoon_A34_RGB.svg
    'wrench': (), // Vektis_Icoon_A35_RGB.svg
    'medicin-bottle': (), // Vektis_Icoon_A36_RGB.svg
    'hospital-bed': (), // Vektis_Icoon_A37_RGB.svg
    'ribbon': (), // Vektis_Icoon_A38_RGB.svg
    'flag-checkered': (), // Vektis_Icoon_A39_RGB.svg
    'calculator': (), // Vektis_Icoon_A40_RGB.svg
    'eye': (), // Vektis_Icoon_A41_RGB_1.svg
    'euro': (), // Vektis_Icoon_A42_RGB.svg
    'person-blind': (), // Vektis_Icoon_A43_RGB.svg
    'graph': (), // Vektis_Icoon_A44_RGB_1.svg
    'person-pregnant': (), // Vektis_Icoon_A45_RGB_1.svg
    'syringe': (), // Vektis_Icoon_A46_RGB.svg
    'keyhole': (), // Vektis_Icoon_A47_RGB.svg
    'map-netherlands-marker': (), // Vektis_Icoon_A48_RGB.svg
    'person-hospital': (), // Vektis_Icoon_A49_RGB.svg
    'route': (), // Vektis_Icoon_A50_RGB.svg
    'map-marker': (), // Vektis_Icoon_A51_RGB.svg
    'test-tube': (), // Vektis_Icoon_A52_RGB.svg
    'graduate-hat': (), // Vektis_Icoon_A53_RGB.svg
    'band-aid': (), // Vektis_Icoon_A54_RGB.svg
    'book': (), // Vektis_Icoon_A55_RGB.svg
    'building': (), // Vektis_Icoon_A56_RGB.svg
    'chain': (), // Vektis_Icoon_A57_RGB.svg
    'ecg': (), // Vektis_Icoon_A58_RGB.svg
    'dna': (), // Vektis_Icoon_A59_RGB.svg
    'heart': (), // Vektis_Icoon_A60_RGB.svg
    'ball': (), // Vektis_Icoon_A61_RGB.svg
    'tooth': (), // Vektis_Icoon_A62_RGB.svg
    'map-netherlands': (), // Vektis_Icoon_A63_RGB.svg
    'physical-therapy': (), // Vektis_Icoon_A64_RGB.svg
    'search-document': (), // Vektis_Icoon_A65_RGB.svg
    'stethoscope': (), // Vektis_Icoon_A66_RGB.svg
    'person-male': (), // Vektis_Icoon_A67_RGB.svg
    'user': (), // Vektis_Icoon_A68_RGB.svg
    'house': (), // Vektis_Icoon_A71_RGB.svg
    'talking': (), // Vektis_Icoon_logopedie.svg
    'person-house': ('w': 265, 'h': 96), // Vektis_Icoon_logopedie.svg
    'brain-circle-duotone': (), // Vektis_Icoon+cirkel_A01_RGB.svg
    'hospital-circle-duotone': (), // Vektis_Icoon+cirkel_A02_RGB.svg
    'person-elderly-circle-duotone': (), // Vektis_Icoon+cirkel_A03_RGB.svg
    'caregiver-circle-duotone': (), // Vektis_Icoon+cirkel_A04_RGB.svg
    'document-medical-circle-duotone': (), // Vektis_Icoon+cirkel_A05_RGB.svg
    'cloud-download-circle-duotone': (), // Vektis_Icoon+cirkel_A06_RGB.svg
    'crossing-arrows-circle-duotone': (), // Vektis_Icoon+cirkel_A07_RGB.svg
    'shield-check-circle-duotone': (), // Vektis_Icoon+cirkel_A08_RGB.svg
    'compass-circle-duotone': (), // Vektis_Icoon+cirkel_A09_RGB.svg
    'lightbulb-circle-duotone': (), // Vektis_Icoon+cirkel_A10_RGB.svg
    'gear-circle-duotone': (), // Vektis_Icoon+cirkel_A11_RGB.svg
    'chains-circle-duotone': (), // Vektis_Icoon+cirkel_A12_RGB.svg
    'documents-circle-duotone': (), // Vektis_Icoon+cirkel_A13_RGB.svg
    'flag-check-circle-duotone': (), // Vektis_Icoon+cirkel_A14_RGB.svg
    'calendar-circle-duotone': (), // Vektis_Icoon+cirkel_A15_RGB.svg
    'hand-wave-circle-duotone': (), // Vektis_Icoon+cirkel_A16_RGB.svg
    'question-circle-duotone': (), // Vektis_Icoon+cirkel_A17_RGB.svg
    'business-man-circle-duotone': (), // Vektis_Icoon+cirkel_A18_RGB.svg
    'business-men-circle-duotone': (), // Vektis_Icoon+cirkel_A19_RGB.svg
    'checklist-circle-duotone': (), // Vektis_Icoon+cirkel_A20_RGB.svg
    'speech-bubble-circle-duotone': (), // Vektis_Icoon+cirkel_A21_RGB.svg
    'checklist-squares-circle-duotone': (), // Vektis_Icoon+cirkel_A22_RGB.svg
    'documents-doc-circle-duotone': (), // Vektis_Icoon+cirkel_A23_RGB.svg
    'monitor-check-circle-duotone': (), // Vektis_Icoon+cirkel_A24_RGB.svg
    'document-circle-duotone': (), // Vektis_Icoon+cirkel_A25_RGB.svg
    'speech-bubble-conversation-circle-duotone': (), // Vektis_Icoon+cirkel_A26_RGB.svg
    'documents-check-circle-duotone': (), // Vektis_Icoon+cirkel_A28_RGB.svg
    'search-circle-duotone': (), // Vektis_Icoon+cirkel_A29_RGB.svg
    'document-question-mark-circle-duotone': (), // Vektis_Icoon+cirkel_A30_RGB.svg
    'documents-std-circle-duotone': (), // Vektis_Icoon+cirkel_A31_RGB.svg
    'envelope-circle-duotone': (), // Vektis_Icoon+cirkel_A32_RGB.svg
    'phone-circle-duotone': (), // Vektis_Icoon+cirkel_A33_RGB.svg
    'man-woman-circle-duotone': (), // Vektis_Icoon+cirkel_A34_RGB.svg
    'wrench-circle-duotone': (), // Vektis_Icoon+cirkel_A35_RGB.svg
    'medicin-bottle-circle-duotone': (), // Vektis_Icoon+cirkel_A36_RGB.svg
    'hospital-bed-circle-duotone': (), // Vektis_Icoon+cirkel_A37_RGB.svg
    'ribbon-circle-duotone': (), // Vektis_Icoon+cirkel_A38_RGB.svg
    'flag-checkered-circle-duotone': (), // Vektis_Icoon+cirkel_A39_RGB.svg
    'calculator-circle-duotone': (), // Vektis_Icoon+cirkel_A40_RGB.svg
    'eye-circle-duotone': (), // Vektis_Icoon+cirkel_A41_RGB.svg
    'euro-circle-duotone': (), // Vektis_Icoon+cirkel_A42_RGB.svg
    'person-blind-circle-duotone': (), // Vektis_Icoon+cirkel_A43_RGB.svg
    'graph-circle-duotone': (), // Vektis_Icoon+cirkel_A44_RGB.svg
    'person-pregnant-circle-duotone': (), // Vektis_Icoon+cirkel_A45_RGB.svg
    'syringe-circle-duotone': (), // Vektis_Icoon+cirkel_A46_RGB.svg
    'keyhole-circle-duotone': (), // Vektis_Icoon+cirkel_A47_RGB.svg
    'map-netherlands-marker-circle-duotone': (), // Vektis_Icoon+cirkel_A48_RGB.svg
    'person-hospital-circle-duotone': (), // Vektis_Icoon+cirkel_A49_RGB.svg
    'route-circle-duotone': (), // Vektis_Icoon+cirkel_A50_RGB.svg
    'map-marker-circle-duotone': (), // Vektis_Icoon+cirkel_A51_RGB.svg
    'test-tube-circle-duotone': (), // Vektis_Icoon+cirkel_A52_RGB.svg
    'graduate-hat-circle-duotone': (), // Vektis_Icoon+cirkel_A53_RGB.svg
    'band-aid-circle-duotone': (), // Vektis_Icoon+cirkel_A54_RGB.svg
    'book-circle-duotone': (), // Vektis_Icoon+cirkel_A55_RGB.svg
    'building-circle-duotone': (), // Vektis_Icoon+cirkel_A56_RGB.svg
    'chain-circle-duotone': (), // Vektis_Icoon+cirkel_A57_RGB.svg
    'ecg-circle-duotone': (), // Vektis_Icoon+cirkel_A58_RGB.svg
    'dna-circle-duotone': (), // Vektis_Icoon+cirkel_A59_RGB.svg
    'heart-circle-duotone': (), // Vektis_Icoon+cirkel_A60_RGB.svg
    'ball-circle-duotone': (), // Vektis_Icoon+cirkel_A61_RGB.svg
    'tooth-circle-duotone': (), // Vektis_Icoon+cirkel_A62_RGB.svg
    'map-netherlands-circle-duotone': (), // Vektis_Icoon+cirkel_A63_RGB.svg
    'physical-therapy-circle-duotone': (), // Vektis_Icoon+cirkel_A64_RGB.svg
    'search-document-circle-duotone': (), // Vektis_Icoon+cirkel_A65_RGB.svg
    'stethoscope-circle-duotone': (), // Vektis_Icoon+cirkel_A66_RGB.svg
    'person-male-circle-duotone': (), // Vektis_Icoon+cirkel_A67_RGB.svg
    'user-circle-duotone': (), // Vektis_Icoon+cirkel_A68_RGB.svg
);