Ga naar inhoud
Lemone Wiki

Werken met SVG

Iconen

Functionele iconen

Functionele iconen zijn iconen die voornamelijk een visuele functie hebben, bijvoorbeeld een pijl op een knop. We gaan er voor het gemak van uit dat functionele iconen bestaan uit 1 kleur.

  1. Verzamel alle iconen op 1 plek binnen het design of een apart bestand, op deze manier kan je ze makkelijk allemaal tegelijkertijd exporteren.
  2. Maak per icoon een “Artboard” aan en maak de grootte consistent, bijvoorbeeld 24px bij 24px.
    1. Geef dit “Artboard” een duidelijke naam icon/functional/{{ icon_name }}, dit helpt bij het exporteren van de iconen.
    2. Selecteer bij de export instellingen “exporteren als svg”.
    3. Kopieer vervolgens steeds dit “Artboard” om jezelf werk te besparen.
  3. Plak vervolgens het icoon in je net aangemaakte “Artboard” en pas de naam aan (Engels)
  4. Schaal het icoon zodat deze binnen het “Artboard” past
    1. Schalen in Sketch doe je met cmd+k, op deze manier pas je ook eventuele strokes goed aan
    2. Schalen in Figma …
    3. Wees consistent met schalen, zo zullen alle iconen in verhouding zijn
  5. Controleer het icoon
    1. Een goed icoon heeft geen clip paths, hierdoor krijgt je ID’s en dat wil je niet
    2. Een goed icoon is niet geroteerd
  6. Exporteer alle iconen in je project, bijvoorbeeld in de svg-folder
  7. Comprimeer de iconen nadat ze zijn geëxporteerd met SVGOMG
    1. [ToDo] Standaard settings
  8. Controleer het icoon
    1. Het icoon bevat geen width en height
    2. Het icoon bevat geen ID’s (om problemen te voorkomen)
    3. Het icoon bevat geen title
    4. Het icoon bevat geen xml
  9. Vervang alle kleuren door currentColor, zodat je makkelijk de kleur kan aanpassen

Icoon Artboards

Sketch Artboard met verschillende iconen

Geëxporteerd icoon

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path
    fill="currentColor"
    fill-rule="evenodd"
    d="M14.945 8.304A.62.62 0 0 0 15 8.028c0-.11-.018-.228-.055-.35a.433.433 0 0 1-.082-.111.88.88 0 0 0-.082-.129l-4.673-4.717a.78.78 0 0 0-.547-.221.78.78 0 0 0-.548.221.795.795 0 0 0-.219.553c0 .209.073.393.219.553l3.359 3.39H1.785c-.243 0-.435.07-.575.212-.14.141-.21.328-.21.562 0 .245.07.439.21.58.14.141.332.212.575.212h10.587l-3.359 3.372a.795.795 0 0 0-.219.553c0 .209.073.393.219.552a.813.813 0 0 0 .548.24.85.85 0 0 0 .283-.055.612.612 0 0 0 .264-.185l4.673-4.716.11-.111a.178.178 0 0 0 .054-.129Z"
  />
</svg>