Including fontawesome brand icons on frontmatter metadata - reactjs

Question

I'm making some changes to a Gatsby starter and ran into an annoying problem with fontawesome brand icons. The problem is that unlike most icons, that are called faPhone or something like that, the brand icons also need a prefix ,fab.
So I can make them work in the body of my posts, like this: <Icon icon={['fab', 'github']} />
The problem is when I wanna include it on the frontmatter metadata like:
---
category: 'socials'
title: 'Github'
icon: 'fab github'
content: 'janedoegithub'
---
I have tried passing it like the above example, as 2 separate strings, as a list, and nothing seems to work. Does anyone know how to solve this?
Edit: both of these formats also don't work
---
category: 'socials'
title: 'Github'
icon:
- fab
- github
content: 'janedoegithub'
---
---
category: 'socials'
title: 'Github'
icon: ['fab', 'github']
content: 'janedoegithub'
---
when I try them I get this error:
GRAPHQL
There was an error in your GraphQL query:
Cannot query field "icon" on type "MdxFrontmatter".
If you don't expect "icon" to exist on the type "MdxFrontmatter" it is most
likely a typo.
However, if you expect "icon" to exist there are a couple of solutions to common
problems:
- If you added a new data source and/or changed something inside
gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in
GraphiQL and use the GraphiQL explorer to see which fields you can query and
what shape they have
- You want to optionally use your field "icon" and right now it is not used
anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL
schema. A quick fix is to add at least one entry with that field ("dummy
content")
It is recommended to explicitly type your GraphQL schema if you want to use
optional fields. This way you don't have to add the mentioned "dummy content".
Visit our docs to learn how you can define the schema for "MdxFrontmatter":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
File: src/components/ContactInfo/index.js:25:15
this is the index.js mentioned in the error:
import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import InfoBlock from 'components/ui/InfoBlock';
import Container from 'components/ui/Container';
import TitleSection from 'components/ui/TitleSection';
import * as Styled from './styles';
const ConctactInfo = () => {
const { mdx, allMdx } = useStaticQuery(graphql`
query {
mdx(frontmatter: { category: { eq: "socials section" } }) {
frontmatter {
title
subtitle
}
}
allMdx(filter: { frontmatter: { category: { eq: "socials" } } }, sort: { fields: fileAbsolutePath }) {
edges {
node {
id
frontmatter {
title
icon
content
}
}
}
}
}
`);
const sectionTitle = mdx.frontmatter;
const socials = allMdx.edges;
return (
<Container section>
<TitleSection title={sectionTitle.title} subtitle={sectionTitle.subtitle} center />
{socials.map((item) => {
const {
id,
frontmatter: { title, icon, content }
} = item.node;
return (
<Styled.ContactInfoItem key={id}>
<InfoBlock icon={icon} title={title} content={content} center />
</Styled.ContactInfoItem>
);
})}
</Container>
);
};
export default ConctactInfo;

Answer 1

As far as I understand your issue, you want to pass the icon data field from the markdown to the template/component. In that case, you can use:
---
category: 'socials'
title: 'Github'
icon:
- fab
- github
content: 'janedoegithub'
---
Note: be careful with the indentation
Or:
---
category: 'socials'
title: 'Github'
icon: ['fab', 'github']
content: 'janedoegithub'
---
You can store arrays in markdown files both ways.
Then, once your GraphQL query have retrieved and filtered your results, your component may look like:
<Icon icon={markdownData.icon} />