So first off I want to make changes to the schema. I've done this before for the changes to the category and author pages so there's plenty here to guide you through that process already.

When making changes to the schema we always must run the following after any updates:

sanity graphql deploy

A quick note to myself, sometimes I get a 401 error from that. To fix this unauthorised request, I can just run:

sanity logout
sanity login

I am definitely one of those people who has an endless project and never really shuts down everything properly at the end of the day (actually night/early morning).

So then now all we have to do is query our new data, and feed it through (parse? Is that the right term? At least I know what I mean...) to the components in which we want to use the data.

Now because they are social icons, I've opted to use our good pal FontAwesome. They have an official FontAwesome React component which is super easy to install and use and nice simple documentation.

All you have to do is install the core package:

npm i --save @fortawesome/fontawesome-svg-core

then any of the other packages you want to use. For social icons, we're going to install the brand icons package like so:

npm install --save @fortawesome/free-brands-svg-icons

Importing the icons you want for use is as simple as:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter } from '@fortawesome/free-solid-svg-icons'

const twitterIcon = <FontAwesomeIcon icon={faTwitter} />

And now we can use that icon wherever we want!

I've hardcoded the order of the icons for now, but in the future I want to edit the schema to be able to rearrange them all in the backend. I'll have to give a little more thought about what I want the end product to be (some more flexibility might be nice) but for now, we have some functional social icons in the footer of every page!

Now go check out my social pages - follow, like, subscribe etc. You know the drill.