Add usage example to Readme about sanity-plugin-icon-picker HOT 7 CLOSED

// gatsby-node.js
const FiIcons = require("react-icons/fi")
const HiIcons = require("react-icons/hi")
const MdIcons = require("react-icons/md")

// Function to get the Icons needed to display
const getIcon = (icon) => {
  if (icon.provider === "fi") {
    const Icon = FiIcons[icon.name]
    const stringIcon = `${Icon}`
    const startIndex = stringIcon.indexOf("GenIcon(") + 8
    const endIndex = stringIcon.lastIndexOf(")(props)")
    const sliced = stringIcon.slice(startIndex, endIndex)
    return sliced
  }
  if (icon.provider === "hi") {
    const Icon = HiIcons[icon.name]
    const stringIcon = `${Icon}`
    const startIndex = stringIcon.indexOf("GenIcon(") + 8
    const endIndex = stringIcon.lastIndexOf(")(props)")
    const sliced = stringIcon.slice(startIndex, endIndex)
    return sliced
  }
  if (icon.provider === "mdi") {
    const Icon = MdIcons[icon.name]
    const stringIcon = `${Icon}`
    const startIndex = stringIcon.indexOf("GenIcon(") + 8
    const endIndex = stringIcon.lastIndexOf(")(props)")
    const sliced = stringIcon.slice(startIndex, endIndex)
    return sliced
  }
}

// Create the schema for GraphQL
exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes } = actions
  
  const sanitySocialLinksTypeDefs = `
    type SanitySocialLinks implements Node {
      resolvedHeaderSocialLinks: [SocialLinks]
      resolvedFooterSocialLinks: [SocialLinks]
    }
    type SocialLinks {
      iconAsString: String
      link: String
      name: String
    }
  `
  createTypes(sanitySocialLinksTypeDefs)
}

// Resolve the icon data at the end of the GraphQL process after the other nodes are available
exports.createResolvers = ({ createResolvers }) => { 
  const iconResolvers = {
    SanitySocialLinks: {
      resolvedHeaderSocialLinks: {
        resolve: (source, args = {}) => {
          const iconObject = source.headerSocialLinks.map((socialLink) => {
            return {
              name: socialLink.name,
              link: socialLink.link,
              iconAsString: getIcon(socialLink.icon),
            }
          })
          return iconObject
        },
      },
      resolvedFooterSocialLinks: {
        resolve: (source, args = {}) => {
          const iconObject = source.footerSocialLinks.map((socialLink) => {
            return {
              name: socialLink.name,
              link: socialLink.link,
              iconAsString: getIcon(socialLink.icon),
            }
          })
          return iconObject
        },
      },
    },
  }
  createResolvers(iconResolvers)
}

// iconGenerator.js
// This component is responsible for actually resolving the icons based on data passed in from GraphQL
import { GenIcon } from "react-icons"

// icon comes in as a string from GraphQL and then is parsed back into JSON.
// Example of the format coming in
// "{"tag":"svg","attr":{"viewBox":"0 0 20 20","fill":"currentColor"},"child":[{"tag":"path","attr":{"fillRule":"evenodd","d":"M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z","clipRule":"evenodd"}}]}"

const IconGenerator = ({ icon }) => {
  // Parse the string back to JSON
  const parsed = JSON.parse(icon)
  // Pass the object into the icon generator
  const Icon = GenIcon(parsed)
  return <Icon />
}

export default IconGenerator

// headerSocialLinks.js
// This just takes the data that is passed to it and loops over the data to present the icons
// The query would look something like this:
// allSanitySocialLinks(
        //   limit: 1
        //   sort: { fields: _updatedAt, order: DESC }
        // ) {
        //   nodes {
        //     resolvedFooterSocialLinks {
        //       name
        //       link
        //       iconAsString
        //     }
        //     resolvedHeaderSocialLinks {
        //       name
        //       link
        //       iconAsString
        //     }
        //   }
        // }
import { Fragment } from "react"
import IconGenerator from "../../shared/iconGenerator"

const HeaderSocialLinks = ({ socialLinks }) => {
  return (
    <Fragment>
      {socialLinks.map((link) => (
        <li key={link.name}>
          <a
            href={link.link}
            sx={{
              py: 2,
              pl: 2,
              pr: 2,
              ":last-of-type": {
                pr: 0,
              },
            }}
          >
            <IconGenerator icon={link.iconAsString} />
          </a>
        </li>
      ))}
    </Fragment>
  )
}

export default HeaderSocialLinks