Icoon-afbeelding
Het Icoon-component kan gebruikt wordt met unicode-codes om een van de iconen uit de standaard icoon-set te gebruiken.
Als een icoon nodig is dat niet onderdeel is van de standaard icoon-set, dan kan ervoor gekozen worden om een applicatie-specifieke icoon-set toe te voegen. In sommige gevallen is dat niet wenselijk, bijvoorbeeld omdat het icoon maar op één plek gebruikt wordt. In dat geval is het ook mogelijk om een normale afbeelding als icoon te gebruiken.
Voeg hiervoor de class icon toe aan het <img> element om gebruik
te maken van de visuele weergave van een icoon.
Voorbeeld
Visueel voorbeeld:
%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2025.1%2030.3'%20style='enable-background:new%200%200%2025.1%2030.3;'%20xml:space='preserve'%3e%3cpath%20d='M22.5,8.8C21.9,8.4,21,8,20.1,7.7c-0.2-3.2-0.8-7.4-2.6-7.7c-2-0.3-3.2,3.4-4.1,6.6c-1,0-2,0-3,0.1C9.3,4.3,7.5,1.1,6.1,1.5%20C4.5,1.9,4.8,5.3,5.2,8c-1,0.5-1.9,1-2.6,1.8c-2.9,2.8-2.8,7.5-2.2,10c0.6,2.9,5.2,8.6,8.2,10c1.6,0.8,7,0.7,8.7,0%20c3.3-1.4,6.4-9,6.4-9S27.5,11.8,22.5,8.8z%20M7.8,23.8c-1.1,0-1.9-1.6-1.9-3.5s0.9-3.5,1.9-3.5c1.1,0,1.9,1.6,1.9,3.5%20S8.9,23.8,7.8,23.8z%20M17.1,23.8c-1.1,0-1.9-1.6-1.9-3.5s0.9-3.5,1.9-3.5c1.1,0,1.9,1.6,1.9,3.5S18.2,23.8,17.1,23.8z'/%3e%3c/svg%3e)
HTML-voorbeeld:
<img src="cat.svg" class="icon" alt="Kat" />Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via npm
CSS-voorbeeld:
@use "@minvws/manon/icon";