How can I consume the data returned from Sanity Studio in my React app?
\n\n#### Example 1: Dynamically generating icon\n\nHere's a really simple example of how you could consume the data to render a Font Awesome icon from it. Note that in this example I'm using the option `outputFormat: 'react'` for the icon picker in the studio as mentioned [here](https://github.com/christopherafbjur/sanity-plugin-icon-picker#output-format).\n\n```js\nimport * as Icons from 'react-icons/fa';\n\n// Sanity data mock\nconst data = {\n _type: 'iconPicker',\n name: 'FaBeer',\n provider: 'fa',\n _updatedAt: '2021-07-25T02:30:43.141Z',\n};\n\nconst DynamicFontAwesomeIcon = ({ name }) => Icons[name];\n\nexport default function App() {\n const Icon = DynamicFontAwesomeIcon(data);\n return (\n\n
\n );\n}\n```\n\n#### Example 2: Stored SVG\n\nIf you've opted in to [store SVGs](#store-svg) in your data (`options.storeSvg`), you could present them in various ways:\n\n```js\n// Sanity data mock\nconst data = {\n _type: 'iconPicker',\n name: 'alert-circle',\n provider: 'fi',\n svg: '',\n};\n\nexport default function App() {\n const encodedSvg = encodeURIComponent(data.svg);\n const imgSrc = `data:image/svg+xml,${encodedSvg}`;\n\n return (\n \n 
\n
\n );\n}\n```\n\n```js\nimport SVG from 'react-inlinesvg';\n\n// Sanity data mock\nconst data = {\n _type: 'iconPicker',\n name: 'alert-circle',\n provider: 'fi',\n svg: '',\n};\n\nexport default function App() {\n return (\n \n \n
\n );\n}\n```\n\n