This content originally appeared on Level Up Coding - Medium and was authored by George Argyrousis
Scalable Vector Graphics (SVGs) are commonly used for web applications due to their innate ability to augment after creation. Vector graphics are written in XML format providing tremendous advantages for quality, scale and compression over traditional raster image formats such as .png or .jpg. In addition, we can programmatically change arguments with CSS and JavaScript for added flexibility. You can alter properties like background, stroke colour, stroke thickness -even define how joins are connected and apply transitions.
Furthermore, SVGs can be easily encoded as data URIs and placed in HTML img tags or used with the CSS url() property. When encoding your SVGs for the avoidance of separate HTTP requests, you are loosing all aforementioned inherited benefits. Such implementations can be uncommon, however, it is important to understand that SVGs can be used in different circumstances.
Google’s material design team offers a well maintained library of icons with consistent design. It’s easy to use and available on npm repositories for React.
$ npm i material-design-icons
Depending on the specificity of your application, the library’s coverage might be limited. You could add another library, insert icons that you found externally -maybe have your design team create one and you import it from figma. Inevitably, your application will need more icons …
Requirements
We have three key engineering aspects that need to be analysed before creating our re-usable component.
- Props — Multiple properties that will propagate through all of our icons can be extracted as optional or required parameters. These parameters should cater towards a consistent look and feel across the application’s context.
- Expansion — Further additions of icons within our library should be effortless without necessary updates to dependent code.
- Developer Experience — Importing a single component should handle the inclusion of specific icons based on parameters. We can also introduce auto-complete for faster definitions.
By having our requirements well defined, we can start developing a robust library of icons.
Implementation
The following implementation does not cover tree-shakable icons. If you are interested in such a topic, please reach out or leave a comment.
We can start by defining the core CSS styles that will be applied globally. It is recommended that you store color and stroke values in CSS to have a clear separation of concern.
stroke-linecap and stroke-linejoin should match to enable a more consistent visual language.
The content of our SVG icons will be stored in an object of functions. Each function will have a unique name acting as the key identifier for rendering purposes. With TypeScript we can use the keyof typeof operator to extract all keys of an object and define them as a singular type.
Let’s construct the container element that will house all of our children.
We have identified a few properties that are widely used for SVG icons. Noticeably, the width and height properties use the same size property. This is an intended design choice since our library contains square icons with same identical vertical and horizontal dimensions. You can alter the sizing scale according to your specifications.
Finally, we have added a name property that controls which equivalent value to render. Since name has the type of IconNames we have perfect auto-completion when writing our code.
Conclusion
Your project might require different requirements or improvements upon our defined implementation. You can find links to the references used in this project as well as a few amazing open-source libraries below.
Hope you find this article helpful for your own React project!
References
- Optimising SVGs in data URIs
- material-design-icons -npm
- Material icons guide -Google Design
- stroke-linecap — SVG: Scalable Vector Graphics | MDN
- stroke-linejoin — SVG: Scalable Vector Graphics | MDN
Open-source icon libraries
If you found this post useful 👍🏻, please share it with others and give some claps 👏🏻 down below.
By clapping, you help others discover this content and motivate the writing of more articles about accessibility, design, React, JavaScript and TypeScript!
Build a re-usable SVG icon library with React and TypeScript. was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by George Argyrousis
George Argyrousis | Sciencx (2022-01-10T12:53:59+00:00) Build a re-usable SVG icon library with React and TypeScript.. Retrieved from https://www.scien.cx/2022/01/10/build-a-re-usable-svg-icon-library-with-react-and-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.