TypeScript, React, LinkedIn Icon for Gatsby Blog
After switching to Gatsby for my blogging, I’ve been fairly happy with the functionality of the Casper theme. It was obvious how to replace the different images and other content to customize things a bit. It also comes with a few social media icons built-in. However, I’m only interested in connecting with people on specific topics (like software development, photography, etc.), so I wanted to add links to other, more specialized, social media accounts (like LinkedIn for growing my professional network and connecting with other software development professionals, and later Instagram for connecting with folks on photography).
In case others want to expand their Casper theme blog with a LinkedIn icon, I’m sharing the simple code here (NOTE: the actual SVG path for this icon was just from a Google search for LinkedIn icons, and then picking one I liked the most—feel free to replace that with your own prefered icon style):
// tslint:disable:no-http-string
import * as React from 'react';
const LinkedIn: React.FC = () => (
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="26" height="26" viewBox="0 0 192 192">
{
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none">
<path d="M0,192v-192h192v192z" fill="none"></path>
<g fill="#ffffff"><g id="surface1">
<path d="M156,0h-120c-19.875,0 -36,16.125 -36,36v120c0,19.875 16.125,36 36,36h120c19.875,0 36,-16.125 36,-36v-120c0,-19.875 -16.125,-36 -36,-36zM59.36539,162.98077h-29.82693l-0.17307,-89.30769h29.82692zM43.70192,61.99038h-0.17308c-9.75,0 -16.03846,-6.72115 -16.03846,-15.08653c0,-8.56731 6.49039,-15.0577 16.41347,-15.0577c9.92308,0 16.00961,6.49038 16.21153,15.0577c0,8.36538 -6.31731,15.08653 -16.41346,15.08653zM162.77885,162.98077h-30.08654v-48.51923c0,-11.74039 -3.11538,-19.73077 -13.61538,-19.73077c-8.01923,0 -12.34615,5.39423 -14.42308,10.61538c-0.77885,1.875 -0.98077,4.44231 -0.98077,7.06731v50.56731h-30.23077l-0.17308,-89.30769h30.23077l0.17308,12.60577c3.86538,-5.97116 10.29808,-14.42308 25.70192,-14.42308c19.09616,0 33.37501,12.46154 33.37501,39.25961v51.86539z"></path>
</g>
</g>
</g>
}
</svg>
);
export default LinkedIn;If you’re using the same Casper theme as me, you can update your website-config.ts file with a linkedin uri, and then use that to link to your profile. If you run a content site with multiple authors, you can use this component on your authors template to link to their linkedin sites.
An example of how you might use this if you added it to the website-config.ts (and are using the full url):
import LinkedIn from '../icons/linkedin';Be sure to import the component (I used this on the
SiteNav.tsxfile)
Then use it as a link if the config value is set:
{config.linkedin && (
<a
className="social-link-in"
css={SocialLink}
href={config.linkedin}
title="LinkedIn"
target="_blank"
rel="noopener"
>
<LinkedIn />
</a>
)}You can also do the same technique to create other icons for other accounts (I did for Instagram, and may do one for Github also).