While building this site I wanted to include a link to my Thingiverse profile as an icon next to the other social media icons in the nav. Unfortunately the Thingiverse logo is not included in Font Awesome’s brand icons. There is an open pull request to add the Thingiverse logo but it has been open since 2014 so it doesn’t seem like it will be added any time soon.
Since I was already using and somewhat familiar with the react-fontawesome
library I figured I’d do a little resverse engineering and see how it works internally to see if I could shim something together.
If we take a look at the documentation for using Font Awesome with React we can see that we have to import both the FontAwesomeIcon
base component and the icon component for whatever icon we want to display. I appreciate this approach as it allows for tree shaking of the free-solid-svg-icons
library. Because the icon itself was imported separately it was a signal to me that I may be able to pass anything to the FontAwesomeIcon
component.
Let’s have a look at the source of faCoffee
in the @fortawesome/free-solid-svg-icons
library.
Well okay, this looks promising. It seems like this is just an abstraction of the svg file as a module in JavaScript.
Now let’s see if we can find a SVG for the Thingiverse logo. A quick search for “thingiverse svg icon” yields the following from worldvectorlogo.com.
Downloading the file and looking at the source we can see it is a relatively simple SVG with a single <path>
element which matches what we see in the faCoffee
example above.
With that, I created a IconThingiverse.js
file in the components directory, copied the contents from the faCoffee.js
source and modified it to bring it up to speed with ES6. Then I copied the contents of the d
attribute of the <path>
element from thingiverse-logo.svg
and pasted it as the value of the svgPathData
in my new JS file. A few other updates to some of the other const
’s and we have the following.
We can bring this all together and try it out in a simple example.
Woud you look at that, it works! Best of all it acts just like any other Font Awesome icon as it inherits the styles of it’s parent element and is a benefactor of all the other things the FontAwesomeIcon
components does.
You might ask, “Could I have just rendered the SVG directly as it’s own component?“. Yeah, sure. And I would have done that had this not all worked out. Plus it keeps the way I interact with icons within this codebase consistent.
For example, where I display the social icons below the nav links I can import all the icons, build an array of the links, then render them all by mapping over the array.
I’m very aware I got lucky on a few steps along the way. Finding a free SVG file for the logo I was looking for was the first. The SVG being relatively simple and being compatable with what <FontAwesomeReact>
expects in the svgPathData
prop was the other. This solution obviously won’t work with every SVG but it at least serves as a guide for others to try it out.
You can checkout all the code for this entire website on my GitHub.
Comments