Tools /
Technology
Stap voor stap een Flexible Icon Component ontwikkelen
)
In webontwikkeling zijn pictogrammen een essentieel onderdeel van elke gebruikersinterface. Ze communiceren snel en effectief informatie en dienen vaak als visuele aanwijzing voor een bepaalde functie of functie. Bij het bouwen van een applicatie of website is het belangrijk om toegang te hebben tot een breed scala aan pictogrammen die eenvoudig kunnen worden aangepast aan je ontwerp. In deze blogpost verkennen we hoe je een aanpasbare pictogramcomponent in React en Next.js kunt maken door SVG's te exporteren en te transformeren in React-componenten die eenvoudig gestyled en gemanipuleerd kunnen worden.
Een aangepaste pictogram component is essentieel wanneer je snel nieuwe componenten wilt maken.
Door enkele extra opties aan je component toe te voegen, kun je eenvoudig de kleuren en grootte van je pictogram aanpassen, terwijl je nog steeds profiteert van een standaard stijllaag binnen de component zelf. Dit zorgt voor meer consistentie en, dankzij het gebruik van enums, kun je zelfs extra functies zoals autocomplete in je IDE gebruiken.
Met deze kennis kun je een bibliotheek van aangepaste pictogrammen maken die in meerdere projecten en applicaties gebruikt kunnen worden, wat op de lange termijn tijd en moeite bespaart.
1. SVG's exporteren
Eerst hebben we al onze .svg-bestanden nodig. In ons voorbeeld exporteren we ze vanuit Figma en slaan we ze op in de public folder.
Niet alle svg-bestanden zijn echter hetzelfde. Bij het exporteren kunnen sommige bestanden geen viewBox-attribuut hebben of kan er een clippingmasker aan toegevoegd zijn.
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.707 2.29298C10.5184 2.11082 10.2658 2.01003 10.0036 2.01231C9.7414 2.01458 9.49059 2.11975 9.30518 2.30516C9.11977 2.49057 9.0146 2.74138 9.01233 3.00358C9.01005 3.26578 9.11084 3.51838 9.293 3.70698L12.586 6.99998H1C0.734784 6.99998 0.48043 7.10534 0.292893 7.29287C0.105357 7.48041 0 7.73476 0 7.99998C0 8.2652 0.105357 8.51955 0.292893 8.70709C0.48043 8.89462 0.734784 8.99998 1 8.99998H12.586L9.293 12.293C9.19749 12.3852 9.12131 12.4956 9.0689 12.6176C9.01649 12.7396 8.9889 12.8708 8.98775 13.0036C8.9866 13.1364 9.0119 13.268 9.06218 13.3909C9.11246 13.5138 9.18671 13.6255 9.28061 13.7194C9.3745 13.8133 9.48615 13.8875 9.60905 13.9378C9.73194 13.9881 9.86362 14.0134 9.9964 14.0122C10.1292 14.0111 10.2604 13.9835 10.3824 13.9311C10.5044 13.8787 10.6148 13.8025 10.707 13.707L15.707 8.70698C15.8945 8.51945 15.9998 8.26514 15.9998 7.99998C15.9998 7.73482 15.8945 7.48051 15.707 7.29298L10.707 2.29298Z" fill="#162C51"/>
</svg>2. De afmetingen aanpassen
In plaats van de eigenschappen width="16" en height="16" gaan we viewBox="0 0 16 16" toevoegen. Dit zorgt ervoor dat de verhoudingen van het pictogram behouden blijven, maar dat de grootte niet wordt beperkt door een vaste breedte of hoogte.
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.707 2.29298C10.5184 2.11082 10.2658 2.01003 10.0036 2.01231C9.7414 2.01458 9.49059 2.11975 9.30518 2.30516C9.11977 2.49057 9.0146 2.74138 9.01233 3.00358C9.01005 3.26578 9.11084 3.51838 9.293 3.70698L12.586 6.99998H1C0.734784 6.99998 0.48043 7.10534 0.292893 7.29287C0.105357 7.48041 0 7.73476 0 7.99998C0 8.2652 0.105357 8.51955 0.292893 8.70709C0.48043 8.89462 0.734784 8.99998 1 8.99998H12.586L9.293 12.293C9.19749 12.3852 9.12131 12.4956 9.0689 12.6176C9.01649 12.7396 8.9889 12.8708 8.98775 13.0036C8.9866 13.1364 9.0119 13.268 9.06218 13.3909C9.11246 13.5138 9.18671 13.6255 9.28061 13.7194C9.3745 13.8133 9.48615 13.8875 9.60905 13.9378C9.73194 13.9881 9.86362 14.0134 9.9964 14.0122C10.1292 14.0111 10.2604 13.9835 10.3824 13.9311C10.5044 13.8787 10.6148 13.8025 10.707 13.707L15.707 8.70698C15.8945 8.51945 15.9998 8.26514 15.9998 7.99998C15.9998 7.73482 15.8945 7.48051 15.707 7.29298L10.707 2.29298Z" fill="#162C51"/>
</svg>3. De kleur bepalen
We willen ook de kleur van ons pictogram buiten de component kunnen aanpassen. Later voegen we een class toe aan het svg-bestand om de grootte of kleur te regelen. Daarom moeten de fill of stroke stijltags niet hardcoded zijn. Je zou ze kunnen verwijderen en handmatig kleuren instellen, maar niet alle svg-bestanden zijn gelijk. In plaats daarvan gebruiken we de CSS-eigenschap color en vervangen we de oorspronkelijke fill of stroke met currentColor. Hierdoor wordt de kleur automatisch aangepast via de class. Ook de grootte wordt ingesteld via een class.
.icon {
color: #162C51;
display: inline-block;
height: 16px;
box-sizing: border-box;
width: 16px;
svg {
display: block;
}
}Nu hebben we een svg-pictogram met aanpasbare afmetingen en kleuren, maar om het gebruik makkelijker te maken, gaan we het in een netjes geformatteerde component gieten.
4. Het icon component opzetten
Voor onze component willen we dat het een paar dingen doet: het pictogram naar keuze veranderen en een class aan de component toevoegen. Andere zaken, zoals het toevoegen van een onClick-event, kunnen later natuurlijk nog worden toegevoegd.
Allereerst importeren we alle svg-bestanden.
import React from "react";
import classNames from "classnames"
import styles from "./Icon.module.scss";
import ArrowUp from "@public/icons/ArrowUp.svg";
import ArrowDown from "@public/icons/ArrowDown.svg";
import ArrowLeft from "@public/icons/ArrowLeft.svg";
import ArrowRight from "@public/icons/ArrowRight.svg";Vervolgens voegen we onze React-component toe en geven deze de opties die we nodig hebben:
import React from "react";
import classNames from "classnames"
import styles from "./Icon.module.scss";
import ArrowUp from "@public/icons/ArrowUp.svg";
import ArrowDown from "@public/icons/ArrowDown.svg";
import ArrowLeft from "@public/icons/ArrowLeft.svg";
import ArrowRight from "@public/icons/ArrowRight.svg";
interface IconProps {
className?: string;
}
export const Icon = ({ className, ...props }: IconProps) => {
return (
<i className={classNames(styles.icon, "icon", className)} {...props}>
<ArrowUp />
</i>
);
}Nu hebben we een component dat we aan elke andere React-component kunnen toevoegen, maar om gemakkelijk te zien welke pictogrammen we in onze bibliotheek hebben, gaan we enums gebruiken. Dit opzetten kost wat werk, maar het voegt handige autocomplete-functionaliteiten toe in VS Code. Op deze manier kun je de component gebruiken, de juiste enum als iconType toewijzen, en dat is alles waar je aan hoeft te denken.
import React from "react";
import classNames from "classnames"
import styles from "./Icon.module.scss";
import ArrowUp from "@public/icons/ArrowUp.svg";
import ArrowDown from "@public/icons/ArrowDown.svg";
import ArrowLeft from "@public/icons/ArrowLeft.svg";
import ArrowRight from "@public/icons/ArrowRight.svg";
export enum IconsEnum {
ARROWUP = "arrowup",
ARROWDOWN = "arrowdown",
ARROWRIGHT = "arrowright",
ARROWLEFT = "arrowleft",
}
interface IconProps {
iconType: IconsEnum;
className?: string;
}
export const Icon = ({ iconType = IconsEnum.ARROWRIGHT, className, ...props }: IconProps) => {
const generateIcon = (icon: IconsEnum) => {
switch (icon) {
case IconsEnum.ARROWUP:
return <ArrowUp />;
case IconsEnum.ARROWDOWN:
return <ArrowDown />;
case IconsEnum.ARROWLEFT:
return <ArrowLeft />;
case IconsEnum.ARROWRIGHT:
return <ArrowRight />;
default:
return <ArrowRight />;
}
};
return (
<i className={classNames(styles.icon, "icon", className)} {...props}>
{generateIcon(iconType)}
</i>
);
}Voorbeeld
Als je zelf de details wilt doorlopen of het in actie wilt zien, kun je op de link klikken om het code sandbox voorbeeld te bekijken.
)
)
03 / 15 / 2023
Our Smooth Scrolling Libraries.
)
03 / 24 / 2023
De key moments die je project kunnen maken of kraken
)
03 / 10 / 2023