{
"componentChunkName": "component---src-components-blog-post-jsx",
"path": "/blog/how-to-render-relevant-icons-based-on-content/",
"result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"5d3b0d04-9f35-5ba3-9e08-e58e4b4d4312","timeToRead":2,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"How To Render Relevant Icons Based on Content\",\n \"date\": \"2020-09-12T13:40:05.267Z\",\n \"template\": \"post\",\n \"draft\": true,\n \"slug\": \"how-to-render-relevant-icons-based-on-content\",\n \"category\": [\"tutorial\"],\n \"description\": \"This article walks through how I use React to render icons that are tailored to the specific content.\",\n \"tags\": [\"React\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"This article walks through how I display relevant, themed icons when linking to content on this site based on the topic or type of content.\\nIf you've visited the homepage of this site, I use a variation of this component to display my recent content, featured content, and recent video lessons.\"), mdx(\"h2\", {\n \"id\": \"articlelist-rendering-article-titles--icons\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#articlelist-rendering-article-titles--icons\",\n \"aria-label\": \"articlelist rendering article titles icons permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ArticleList: Rendering Article Titles + Icons\"), mdx(\"p\", null, \"The logic for displaying article titles alongside a relevant icon is constructed within an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component. Below is an example of a fully functioning, interactive \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component (thanks to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/thoughts-on-migrating-from-markdown-to-mdx/\"\n }, \"MDX\"), \"):\"), mdx(ArticleList, {\n articles: [{\n slug: \"/blog/create-gatsby-blog-search-tutorial/\",\n tags: [\"gatsby\"],\n title: \"How to Add Search Functionality to a Gatsby Blog\"\n }, {\n slug: \"/blog/2020-01-29-automating-file-creation-with-javascript/\",\n tags: [\"javascript\"],\n title: \"Automating File Creation With JavaScript\"\n }, {\n slug: \"/blog/how-to-create-a-github-profile-readme/\",\n tags: [\"github\"],\n title: \"How To Create A GitHub Profile README\"\n }],\n mdxType: \"ArticleList\"\n }), mdx(\"p\", null, \"In my actual site the article data is programmatically passed in from the result of a GraphQL query, however, a similar component can be used regardless of how your website handles data. I used the below JSX markup with hard-coded data to render the above instance of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"\\n\")), mdx(\"p\", null, \"Essentially the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component maps through each article in the articles array and displays the article title along with a link to the article and an article icon based on the article tags. A simplified version of the render of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" resembles the below code. Note: Whenever mapping through items to render items in React you should use a unique \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"key\"), \" in order for React to be able to efficiently differentiate between different items within the generated list:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"{\\n articles.map(({ slug, tags, title }, index) => (\\n
\\n \\n \\n {title}\\n \\n
\\n ))\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"articleicon-returning-the-relevant-icon\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#articleicon-returning-the-relevant-icon\",\n \"aria-label\": \"articleicon returning the relevant icon permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"ArticleIcon: Returning the Relevant Icon\"), mdx(\"p\", null, \"The logic to determine which icon should render for a given article based on its tags is handed off from the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component. Let's take a closer look at the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component.\"), mdx(\"h3\", {\n \"id\": \"setting-up-icons\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#setting-up-icons\",\n \"aria-label\": \"setting up icons permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Setting up Icons\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component imports multiple SVG image files for each of the potential icons that will be rendered:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import GitHubIcon from \\\"./icons/github.svg\\\"\\nimport ReactIcon from \\\"./icons/react.svg\\\"\\nimport JavascriptIcon from \\\"./icons/javascript.svg\\\"\\nimport PenIcon from \\\"./icons/pen.svg\\\"\\n\")), mdx(\"p\", null, \"Then within the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ArticleIcon\"), \" component there's an object that contains the imported icons with key value pairs that look like \", \"[tag]\", \": icon. I have intentionally omitted the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"PenIcon\"), \" from this object as it is the default icon that is displayed when there is not a better matching icon available for a given set of tags. I also decided to structure the object this way so that icons could quickly be retrieved based on their tag name which is the name of the properties in the icons object. In the below instance I have two separate keys for Git and GitHub since either tag should be associated with the GitHubIcon.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"export default function ArticleIcon({ tags }) {\\n const icons = {\\n git: GitHubIcon,\\n github: GitHubIcon,\\n react: ReactIcon,\\n javascript: JavascriptIcon,\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"finding-the-most-relevant-icon\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#finding-the-most-relevant-icon\",\n \"aria-label\": \"finding the most relevant icon permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Finding the Most Relevant Icon\"), mdx(\"p\", null, \"After initializing the icons object the method \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".find()\"), \" is used to locate the first instance of a tag within the array of the tags (passed in via props) that matches a tag within the icons object. Since \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".find()\"), \" returns the first instance that is found if an array of tags contains multiple tags that have icons in the icons object, only the first tag that matches an icon in the icons object will be returned:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const articleTagWithIcon = (tags || []).find(tag => icons[tag.toLowerCase()])\\n\")), mdx(\"p\", null, \"If there is an icon associated with any of the article tags then the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"articleIcon\"), \" is set to the value of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"icons[articleTagWithIcon.toLowerCase()]\"), \" or else the icon will be set to the default icon which is the PenIcon.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const articleIcon = articleTagWithIcon\\n ? icons[articleTagWithIcon.toLowerCase()]\\n : PenIcon\\n\")), mdx(\"p\", null, \"Finally we can return an image in the render of the ArticleIcon:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"return (\\n \\n)\\n\")), mdx(\"h2\", {\n \"id\": \"summary\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#summary\",\n \"aria-label\": \"summary permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Summary\"), mdx(\"p\", null, \"This article went over how to create the logic for a component that renders different images based on the data that is passed in. I used CSS flex for the majority of the styling of this component, if you are interested in learning more about the styling behind the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" inspect the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" on my website! For sake of clarity, I may have omitted some markup or classes that were used to style the component from this article.\"), mdx(\"h2\", {\n \"id\": \"final-code\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#final-code\",\n \"aria-label\": \"final code permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Final Code\"), mdx(\"p\", null, \"All together the complete \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ArticleIcon.jsx\"), \" file looks like:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import React from \\\"react\\\"\\nimport GitHubIcon from \\\"./icons/github.svg\\\"\\nimport ReactIcon from \\\"./icons/react.svg\\\"\\nimport JavascriptIcon from \\\"./icons/javascript.svg\\\"\\nimport PenIcon from \\\"./icons/pen.svg\\\"\\n\\nexport default function ArticleIcon({ tags }) {\\n const icons = {\\n git: GitHubIcon,\\n github: GitHubIcon,\\n react: ReactIcon,\\n javascript: JavascriptIcon,\\n }\\n\\n const articleTagWithIcon = (tags || []).find(tag => icons[tag.toLowerCase()])\\n\\n const articleIcon = articleTagWithIcon\\n ? icons[articleTagWithIcon.toLowerCase()]\\n : PenIcon\\n\\n return (\\n \\n \\n \\n )\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#articlelist-rendering-article-titles--icons","title":"ArticleList: Rendering Article Titles + Icons"},{"url":"#articleicon-returning-the-relevant-icon","title":"ArticleIcon: Returning the Relevant Icon","items":[{"url":"#setting-up-icons","title":"Setting up Icons"},{"url":"#finding-the-most-relevant-icon","title":"Finding the Most Relevant Icon"}]},{"url":"#summary","title":"Summary"},{"url":"#final-code","title":"Final Code"}]},"frontmatter":{"title":"How To Render Relevant Icons Based on Content","date":"September 12, 2020","description":"This article walks through how I use React to render icons that are tailored to the specific content.","tags":["React"]}},"allWebMentionEntry":{"edges":[{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/post/twitter/waterproofheart/1326184389361983488","wmProperty":"mention-of","wmId":905715,"type":"entry","url":"https://twitter.com/alleyco/status/1326184389361983488","likeOf":null,"author":{"url":"https://twitter.com/alleyco","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b499bc35df732473bd712fccd93ca5506f5e3ea31aef17632ea1e8dd62b7182c.jpg","name":"Alley"},"published":"November 10, 2020","content":{"text":"Looking for a way to display relevant, themed icons when linking to content on your site? @waterproofheart gives a really simple and elegant tutorial of how to set one up. Follow the link to learn more: aboutmonica.com/blog/how-to-re…"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/7058822","wmProperty":"like-of","wmId":853843,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-7058822","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/feelzz","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c9560b20b263ed6896f8f8211c91b3a154454ad9e57d7cc409253450a521d0ec.jpg","name":"Peter Fields"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1127988553873547267","wmProperty":"like-of","wmId":852642,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1127988553873547267","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/OSbulog","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/976c022ddd32e8b540648d8a7e704b6e95094c2ec26d16c9668232330a43ccb4.jpg","name":"Oleg Sbulog"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1283269464373342209","wmProperty":"like-of","wmId":852152,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1283269464373342209","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/pocket_jade","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d06ffc9afed25e9b52be60c808afb42555c28e4a0d25432e45271b017ebabc47.jpg","name":"jade"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/2452515619","wmProperty":"like-of","wmId":852006,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-2452515619","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/swkeever","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/339b592a9fa628c974f009b2090ca405e99f7b0cb13dd48462717dcedce619e7.jpg","name":"Sean Keever 🌦️"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1355136739","wmProperty":"like-of","wmId":851981,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1355136739","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/paul_melero","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/cf742803e4ca77b4f1eea820a9f18a3940b43e6a999059beaeed8186a9857b0d.jpg","name":"Paul Melero"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305737646686298112","wmProperty":"repost-of","wmId":851982,"type":"entry","url":"https://twitter.com/jlengstorf/status/1305737646686298112","likeOf":null,"author":{"url":"https://twitter.com/jlengstorf","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a74429440de7b7283bae6f28dfe94610c4a6432e90b73b945a121d60fb439578.jpg","name":"Jason Lengstorf"},"published":"September 15, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/15668072","wmProperty":"like-of","wmId":851980,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-15668072","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/jlengstorf","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a74429440de7b7283bae6f28dfe94610c4a6432e90b73b945a121d60fb439578.jpg","name":"Jason Lengstorf"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/43234377","wmProperty":"like-of","wmId":851978,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-43234377","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/goingonajournie","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/90c289c72ee32f9cf5f4c3eb404bcff85c3871b5e4c7bcbaaeb829ad1c092063.jpg","name":"journie"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/237319190","wmProperty":"like-of","wmId":851979,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-237319190","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/kheruc","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/29b1ec4afe138351fe5995858ea4bcc5c66630711d96a7de7b21c2125e2f5803.jpg","name":"Kristian Heruc"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/2234623872","wmProperty":"like-of","wmId":851977,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-2234623872","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/bossnayamoss","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2185a7c31ccdedd2098ab139603ea4bc7bf86cef599f4a4a3ad9c79fcf29c755.jpg","name":"Naya Moss is working on #frauvislowcodehack"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/758056","wmProperty":"like-of","wmId":851976,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-758056","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/ecrosstexas","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/463b4ed15c2e16baf216e94e7f203bf54853cfce0410fe64417bd33935c0d79e.jpg","name":"Eric Wallace"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1567529924","wmProperty":"like-of","wmId":851892,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1567529924","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/jsjoeio","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ac94041465a65e363617c3c5e2c2d7e3966b4ec4f2f8b689fd9c0a93cb41c1cc.jpg","name":"Joe Previte"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1044888772784123904","wmProperty":"like-of","wmId":851838,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1044888772784123904","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/TheRealDine","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1d88d140413f90f7532b822b3c9a73f86bf44dcc2db7c455159a5c2f6709c261.jpg","name":"TheRealDine"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/2302017685","wmProperty":"like-of","wmId":851832,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-2302017685","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/AniversyLau","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d918a24442f3726e1e2404e5970ac2e20ef158b83a48373d6464162fe95f0534.jpg","name":"Laureni"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305531292939771906","wmProperty":"repost-of","wmId":851816,"type":"entry","url":"https://twitter.com/wiput1999/status/1305531292939771906","likeOf":null,"author":{"url":"https://twitter.com/wiput1999","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e25168afc92533b9798663cd50636eefba57802e2372c66d64e04d16b865b43d.jpg","name":"Wiput Pootong"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/2217699730","wmProperty":"like-of","wmId":851815,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-2217699730","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/vivendoevini","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/24bc56af54cbcb8a0d8eb817e712a916674f9cdcd4935241bdb34830e6097726.jpg","name":"Vinicius Pacheco"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/10044152","wmProperty":"like-of","wmId":851805,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-10044152","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/tomhermans","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/795f03301969b7eb3f47673dca199228325e3a925defe302d9653b3f3283823f.jpg","name":"Tom Hermans🤘"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/777884660537888768","wmProperty":"like-of","wmId":851793,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-777884660537888768","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/berenjorge","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3d7c8499188e61eb394de933339dd3a938b9784e32e967fab631b554ba539b46.jpg","name":"Jorge Berenguer"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305503792658554883","wmProperty":"repost-of","wmId":851794,"type":"entry","url":"https://twitter.com/AngelWebDevy/status/1305503792658554883","likeOf":null,"author":{"url":"https://twitter.com/AngelWebDevy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9b1e8a5a532be0e69c932ab06cb502aa24047e77dce63003e3515ebbf1f1b4e1.png","name":"Angel Juarez"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/18936150","wmProperty":"like-of","wmId":851792,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-18936150","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/ant_laguna","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c42681829473b2b4fe5330d8dc5b20e2226902b26ce6ef70063c9c21680b31c7.jpg","name":"Antonio Laguna ツ"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1079992499941318656","wmProperty":"like-of","wmId":851791,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1079992499941318656","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/AngelWebDevy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9b1e8a5a532be0e69c932ab06cb502aa24047e77dce63003e3515ebbf1f1b4e1.png","name":"Angel Juarez"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/727355433401344000","wmProperty":"like-of","wmId":851790,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-727355433401344000","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/zeshhaan","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/71c38f4b0626e72ad821d701218c13ad8c7a1c1b4997688187348902880ba1c2.jpg","name":"Mohammed Zeeshan"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/70758726","wmProperty":"like-of","wmId":851789,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-70758726","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/_mcbridem_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/17975ca289abb4f60fce543de7d1da796d9eb7d4c6a9c84905f8cd5dc61579b0.jpg","name":"Mike, but wearing a mask"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/528867557","wmProperty":"like-of","wmId":851788,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-528867557","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/KennethFechter","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/466aba0f08f379afaaa8e823d97b50ee4214e4d60b99324b75e02f54146f7ee3.jpg","name":"Kenneth Fechter"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305496791702536192","wmProperty":"repost-of","wmId":851776,"type":"entry","url":"https://twitter.com/arcatech/status/1305496791702536192","likeOf":null,"author":{"url":"https://twitter.com/arcatech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/af90ec23cab4f284078172fa202edc030fee859aacdc120a9e39a3b5a8dedff2.jpg","name":"Dwayne"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305501415369052162","wmProperty":"repost-of","wmId":851775,"type":"entry","url":"https://twitter.com/eggheadio/status/1305501415369052162","likeOf":null,"author":{"url":"https://twitter.com/eggheadio","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2f6afce0931a1c034fedc2b48aaeb2b8429fa20f8b982be3542aa6922b230dae.jpg","name":"egghead.io"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305502656849481728","wmProperty":"repost-of","wmId":851773,"type":"entry","url":"https://twitter.com/emordi_u/status/1305502656849481728","likeOf":null,"author":{"url":"https://twitter.com/emordi_u","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/db834239489aed039ee0a349e9178cd078363187f9dfd8e08362db72292e1ed2.jpg","name":"Uche Emordi"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305501828205940736","wmProperty":"repost-of","wmId":851774,"type":"entry","url":"https://twitter.com/elijahmanor/status/1305501828205940736","likeOf":null,"author":{"url":"https://twitter.com/elijahmanor","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ec06a9de9ac5a70d31ccefccaf28c1b5b8a51a7d21e56fc4e965927c1b5c43a6.jpg","name":"Elijah Manor"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/239478104","wmProperty":"like-of","wmId":851772,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-239478104","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/emordi_u","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/db834239489aed039ee0a349e9178cd078363187f9dfd8e08362db72292e1ed2.jpg","name":"Uche Emordi"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/37301176","wmProperty":"like-of","wmId":851770,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-37301176","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/arcatech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/af90ec23cab4f284078172fa202edc030fee859aacdc120a9e39a3b5a8dedff2.jpg","name":"Dwayne"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/2850917817","wmProperty":"like-of","wmId":851771,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-2850917817","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/PrinceSumberia","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a2caac4c5033f4baf8bdab466cc4239f121a3a90b484283a263cb734091535bc.jpg","name":"Prince Sumberia"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/19084049","wmProperty":"like-of","wmId":851768,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-19084049","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/anthonyharvey","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a54225ef72a0e82f94bb0a03c5a02a2f999cec070d39379e2bb6fe097d915b05.jpg","name":"Anthony Harvey"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/454637518","wmProperty":"like-of","wmId":851769,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-454637518","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/geekintheflesh","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f1ff6b91c2b4d0d75688112430642721dc88ae5126e3bdd0a41d0ff4fbc8adf5.jpg","name":"Geekintheflesh"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/2155621","wmProperty":"like-of","wmId":851767,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-2155621","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/cyishere","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/7e23c5b4deddbfd9f1e69210fe8b1004e25820900e1403da01b3037d282ebdc7.jpg","name":"CY is here 👩💻🚀"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1605581","wmProperty":"like-of","wmId":851762,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1605581","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/crockerbytes","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c14a0b43b5a3db620d6f06a0571072a9242338470902a5bbdd89f8b8b6780736.jpg","name":"Alex Crocker 🏳️🌈"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305489106978435075","wmProperty":"repost-of","wmId":851761,"type":"entry","url":"https://twitter.com/dpkreativ/status/1305489106978435075","likeOf":null,"author":{"url":"https://twitter.com/dpkreativ","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4b7eee792030eb01bb2ca81bc86c5292cabb9a0310f4c7516889acc35a3bd31d.jpg","name":"Divine 🛸"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1137297915104366593","wmProperty":"like-of","wmId":851760,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1137297915104366593","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/dpkreativ","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4b7eee792030eb01bb2ca81bc86c5292cabb9a0310f4c7516889acc35a3bd31d.jpg","name":"Divine 🛸"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1305472865190514689/1305476902208012288","wmProperty":"in-reply-to","wmId":851742,"type":"entry","url":"https://twitter.com/laurieontech/status/1305476902208012288","likeOf":null,"author":{"url":"https://twitter.com/laurieontech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/88eb169f2e962af928bd48c299e3b7e6498b0d59c28536d15ddc583e39950465.jpg","name":"Laurie"},"published":"September 14, 2020","content":{"text":"Your site is like a playground of fun embellishments!"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/948609064484864006","wmProperty":"like-of","wmId":851740,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-948609064484864006","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/laurieontech","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/88eb169f2e962af928bd48c299e3b7e6498b0d59c28536d15ddc583e39950465.jpg","name":"Laurie"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/874993811046502401","wmProperty":"like-of","wmId":851741,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-874993811046502401","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/philipp_ham","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/831b5220d053a3a45b5e33e83d2199f77b8e442848fd24e73db920f4c3ead27c.jpg","name":"Philipp Hamerle"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/14142690","wmProperty":"like-of","wmId":851739,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-14142690","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/toddmorey","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/652ee2094c4d5abda00e567f0d9678a52e904952e60a9b61319b13d587094505.jpg","name":"Todd Morey"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/16054559","wmProperty":"like-of","wmId":851738,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-16054559","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/DavidEPatrick","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/d18d26252f17e1e64697414f3e196d4962b87cf993d489cfa0461ee7867b9b5e.jpg","name":"David E. Patrick"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1305472865190514689/1254335705901420545","wmProperty":"like-of","wmId":851725,"type":"entry","url":"https://twitter.com/waterproofheart/status/1305472865190514689#favorited-by-1254335705901420545","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/joyancefa","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3b961b83797b423d96df260d4b98b367053e7e32d1b1be5a10117c4c23e9f8b2.jpg","name":"Fatou"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1305472865190514689/1305473673776771082","wmProperty":"repost-of","wmId":851726,"type":"entry","url":"https://twitter.com/winkerVSbecks/status/1305473673776771082","likeOf":null,"author":{"url":"https://twitter.com/winkerVSbecks","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/4bc9dc39c63f8eee76305afe82a51e48b1be90e4e22024c0397dc921da6776e3.jpg","name":"Varun Vachhar"},"published":"September 14, 2020","content":{"text":"Curious about how I dynamically render icons tailored to the content within articles? \n\nCheck out my recent post to learn more: https://t.co"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1304869916332429312/1305245906153988098","wmProperty":"in-reply-to","wmId":851465,"type":"entry","url":"https://twitter.com/briantical/status/1305245906153988098","likeOf":null,"author":{"url":"https://twitter.com/briantical","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3394633ae20a782aa94649cc279e9789971b3bf3339f6dbbcd7b85225e3de8a1.jpg","name":"Lutaaya Brian Ivan"},"published":"September 13, 2020","content":{"text":"@rembonmike @GMpamwiza @akapeshm"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/975730620151357440","wmProperty":"like-of","wmId":851464,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-975730620151357440","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/briantical","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/3394633ae20a782aa94649cc279e9789971b3bf3339f6dbbcd7b85225e3de8a1.jpg","name":"Lutaaya Brian Ivan"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1201068561202110464","wmProperty":"like-of","wmId":851456,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1201068561202110464","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/hamed__soheyli","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/63a5f6f746fa34809f8a821e262c7d6a0a10c173482abe7d1698e8306807cebb.jpg","name":"حامد سهیلی"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/145303963","wmProperty":"like-of","wmId":851401,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-145303963","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/nikazawila","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/b04f00f568cbaf641243b1efd4969044b212a603b66efb598ad7bfe15a355dc5.jpg","name":"Nika Zawila"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1304869916332429312/1305171784430485504","wmProperty":"in-reply-to","wmId":851333,"type":"entry","url":"https://twitter.com/alnp1987/status/1305171784430485504","likeOf":null,"author":{"url":"https://twitter.com/alnp1987","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ce57878d1dfa4faa5acacb6bd3c16b60aaea2fc567a50bd3a38954394ad84447.jpg","name":"Alvaro"},"published":"September 13, 2020","content":{"text":"Awesome, Monica!"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/10044152","wmProperty":"like-of","wmId":851284,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-10044152","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/tomhermans","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/795f03301969b7eb3f47673dca199228325e3a925defe302d9653b3f3283823f.jpg","name":"Tom Hermans🤘"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304869916332429312/1305126638573715456","wmProperty":"repost-of","wmId":851263,"type":"entry","url":"https://twitter.com/fabianbrash/status/1305126638573715456","likeOf":null,"author":{"url":"https://twitter.com/fabianbrash","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0ce0e92ea236b019dd044f723456d7e6ac3d10cf2fc202fc350082fce049c974.jpg","name":"Fabian Brash"},"published":"September 13, 2020","content":{"text":"I wrote up an article about how I use React to conditionally render relevant icons for different types of content on my site.\n\nhttps://t.co/"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/127561254","wmProperty":"like-of","wmId":851261,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-127561254","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/jesus_macedo","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bb4a280f92fc5fd41cf68126c2aaabc93e9c50e7b94a212fbf83cdeb9472e648.jpg","name":"Jesús Macedo 🤘🏻"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/351262288","wmProperty":"like-of","wmId":851262,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-351262288","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/fabianbrash","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0ce0e92ea236b019dd044f723456d7e6ac3d10cf2fc202fc350082fce049c974.jpg","name":"Fabian Brash"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1145441861521281024","wmProperty":"like-of","wmId":851235,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1145441861521281024","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/aleja_ferre","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a14888ea921ff93ae09a237a1b90c2e783a65824361881a8050d7373dacbee54.jpg","name":"Maria Alejandra Ferreira torres"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/610971661","wmProperty":"like-of","wmId":851222,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-610971661","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/kamalo_shammah","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2a7557afdec83a4d2f754279560878e7cb8240b10f1fc72f285d29d088df684a.jpg","name":"shammahk⚛️"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/14824675","wmProperty":"like-of","wmId":851186,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-14824675","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/segdeha","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/03dbaf3ecac0c6194b3213c40fc910ff6419910292a373512eb8eb38e7bc95c3.png","name":"Andrew Hedges"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1304869916332429312/1305024826227056640","wmProperty":"in-reply-to","wmId":851185,"type":"entry","url":"https://twitter.com/TheScifibrarian/status/1305024826227056640","likeOf":null,"author":{"url":"https://twitter.com/TheScifibrarian","type":"card","photo":"https://pbs.twimg.com/profile_images/1225993358352338944/MxKW7Ol4.jpg","name":"Scifibrarian"},"published":"September 13, 2020","content":{"text":"Nice!"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/825167970188029952","wmProperty":"like-of","wmId":851184,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-825167970188029952","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/TheScifibrarian","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c802a184e64eab793e14950e9070ede7cd143151f88d65d7342bd7ddc2d0095b.jpg","name":"Scifibrarian"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/48182269","wmProperty":"like-of","wmId":851179,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-48182269","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/shannon_crabill","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9fcdedd58c12234646f620daefb5bac0dec5a6a6e97262f753f51bce4ddcabf0.jpg","name":"Shannon Crabill"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1410417206","wmProperty":"like-of","wmId":851174,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1410417206","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/Ashwin_Mothilal","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/0d6a5f152b23e7f2bb8e66d601701002651541d508332bc612b90489d5477998.jpg","name":"Ashwin Mothilal"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1078358066201088000","wmProperty":"like-of","wmId":851158,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1078358066201088000","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/alfred_toh_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/08fae0c35ec578e5a42fa36c6ec6fb4623b3f03c0108a93a0c569f4eb45a1d9a.jpg","name":"Alfred 💬"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304869916332429312/1304976238105309185","wmProperty":"repost-of","wmId":851140,"type":"entry","url":"https://twitter.com/SawdaSays/status/1304976238105309185","likeOf":null,"author":{"url":"https://twitter.com/SawdaSays","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/9f67bbe4a66f5a6335d2064fd08a396e84f5d5efa66c15e7e8b52d935e2ed9f7.jpg","name":"S."},"published":"September 13, 2020","content":{"text":"I wrote up an article about how I use React to conditionally render relevant icons for different types of content on my site.\n\nhttps://t.co/"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/165198512","wmProperty":"like-of","wmId":851138,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-165198512","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/jovmassimiliano","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/548de218b411453abcf25c8db8feaf7a505fa49409de2ec593fc722f8332c82d.jpg","name":"Giovanni Massimiliano"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1142073858196795393","wmProperty":"like-of","wmId":851139,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1142073858196795393","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/erchwy","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e6dd8950de10729120d529d075bf1c026e176c33e670f1656f90475d419054f0.jpg","name":"Eric Howey"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304869916332429312/1304925675594317824","wmProperty":"repost-of","wmId":851126,"type":"entry","url":"https://twitter.com/stufinn/status/1304925675594317824","likeOf":null,"author":{"url":"https://twitter.com/stufinn","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/854588a9896a360bd758d8573499ea4679f934b7b65186542a7588e6ac323954.jpg","name":"Stu Finn"},"published":"September 12, 2020","content":{"text":"I wrote up an article about how I use React to conditionally render relevant icons for different types of content on my site.\n\nhttps://t.co/"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1248559007763058688","wmProperty":"like-of","wmId":851124,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1248559007763058688","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/eliciaauduong","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2f29653a8332deb1ed16a84ccca241dae61905f30f96362cc8b5b7e44c944a81.jpg","name":"Elicia 👩💻🌸"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/983643088617951232","wmProperty":"like-of","wmId":851125,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-983643088617951232","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/ezekiel_obinwa","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ff5a9f421e500d054c042d2f7782ca81f7bf100f7821350cf3a790f75d26561d.jpg","name":"Eazi"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/42308418","wmProperty":"like-of","wmId":851123,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-42308418","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/amesimmons","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6760aef809d1a2e9f6e02c1c3de7d880f86b079fc1f9caca0cf7be177a7e6492.jpg","name":"Amy Simmons ❄️🌨"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/908324289782452225","wmProperty":"like-of","wmId":851122,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-908324289782452225","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/stufinn","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/854588a9896a360bd758d8573499ea4679f934b7b65186542a7588e6ac323954.jpg","name":"Stu Finn"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1857732703","wmProperty":"like-of","wmId":851115,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1857732703","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/peoray_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/192439a41a410b238a63decf4320fa99a10119dc3fc0f2bb5233323411df27b6.jpg","name":"Emmanuel Raymond"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304869916332429312/1304912087173550080","wmProperty":"repost-of","wmId":851114,"type":"entry","url":"https://twitter.com/peoray_/status/1304912087173550080","likeOf":null,"author":{"url":"https://twitter.com/peoray_","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/192439a41a410b238a63decf4320fa99a10119dc3fc0f2bb5233323411df27b6.jpg","name":"Emmanuel Raymond"},"published":"September 12, 2020","content":{"text":"I wrote up an article about how I use React to conditionally render relevant icons for different types of content on my site.\n\nhttps://t.co/"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/8472102","wmProperty":"like-of","wmId":851112,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-8472102","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/CraigEwert","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f7c7c1fbd95543f46a3c9d2e4c23553cb74c3e6d0829f2c51530591c28bb0bb0.jpg","name":"creee"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304869916332429312/1304914602623299584","wmProperty":"repost-of","wmId":851113,"type":"entry","url":"https://twitter.com/CraigEwert/status/1304914602623299584","likeOf":null,"author":{"url":"https://twitter.com/CraigEwert","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/f7c7c1fbd95543f46a3c9d2e4c23553cb74c3e6d0829f2c51530591c28bb0bb0.jpg","name":"creee"},"published":"September 12, 2020","content":{"text":"I wrote up an article about how I use React to conditionally render relevant icons for different types of content on my site.\n\nhttps://t.co/"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1285589380862627841","wmProperty":"like-of","wmId":851111,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1285589380862627841","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/NepMontanez","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/ce7190c3bd2f2fa14d1e9f0b138801513ba586bfa6f80255fea4db6bbbc41ff3.jpg","name":"Nep Montanez"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1044888772784123904","wmProperty":"like-of","wmId":851107,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1044888772784123904","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/TheRealDine","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/1d88d140413f90f7532b822b3c9a73f86bf44dcc2db7c455159a5c2f6709c261.jpg","name":"TheRealDine"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/2925273723","wmProperty":"like-of","wmId":851106,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-2925273723","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/orsonady","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/45f68af42347e0678ccf94e5ee9e5267fd46c4efc57dd227d79d68ce755fbc10.jpg","name":"orson adams"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/254840217","wmProperty":"like-of","wmId":851105,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-254840217","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/Zaeboi222","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/14375fb002af574736a00ccd509c55b529c45e29e4252706bd3f2cedc37c6369.jpg","name":"Kassidan.Dev"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/728637147482345472","wmProperty":"like-of","wmId":851104,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-728637147482345472","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/fjuandc","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/2dfc0c56e8f1dc7447bb52de90ff82bc3c960b1f72770c960b5b60a203f27374.jpg","name":"💚🚀JuanDC: Juan David Castro 🤣 ⚡️ 🇨🇴"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/repost/twitter/waterproofheart/1304869916332429312/1304896287066583041","wmProperty":"repost-of","wmId":851100,"type":"entry","url":"https://twitter.com/chrisbiscardi/status/1304896287066583041","likeOf":null,"author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":"September 12, 2020","content":{"text":"I wrote up an article about how I use React to conditionally render relevant icons for different types of content on my site.\n\nhttps://t.co/"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/240315182","wmProperty":"like-of","wmId":851099,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-240315182","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/chrisbiscardi","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6cb62548f7ea6e68607b69c1553bde1fcfef10b564e7f87d10e7a8def2dee7dc.png","name":":party-corgi:"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1189601980114706433","wmProperty":"like-of","wmId":851098,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1189601980114706433","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/Minneyahr","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bbdc3c25acc9566ca79552043ce4c03ae0aeeba14770172caf1e9799613dc229.jpg","name":"Arkadiusz Fijalkowski"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/258207878","wmProperty":"like-of","wmId":851089,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-258207878","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/teysrol","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/a7a3b2fbc02db088429f5961553720d6c9335f0c4537b31949ebefdf2c0dd79f.jpg","name":"Shane Taylor"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/comment/twitter/waterproofheart/1304869916332429312/1304886066630086657","wmProperty":"in-reply-to","wmId":851088,"type":"entry","url":"https://twitter.com/brian_d_vaughn/status/1304886066630086657","likeOf":null,"author":{"url":"https://twitter.com/brian_d_vaughn","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6d00504c9fef208197bf229ca313d25133b4698a4b90787a73392692e1fc23ba.jpg","name":"Brian Vaughn 🖤"},"published":"September 12, 2020","content":{"text":"Nice format!"}}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/99973385","wmProperty":"like-of","wmId":851087,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-99973385","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/brian_d_vaughn","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/6d00504c9fef208197bf229ca313d25133b4698a4b90787a73392692e1fc23ba.jpg","name":"Brian Vaughn 🖤"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/2810510944","wmProperty":"like-of","wmId":851081,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-2810510944","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/Ebi_Osuobeni","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/252c8804337bb64e4b1aed7686343e2af18cb8f6436ca1fe91c3cff0abb649c6.jpg","name":"Ebi"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1213650681975820290","wmProperty":"like-of","wmId":851080,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1213650681975820290","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/peixototaii","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/bc7c191ce5712ea2efb6d8d5ff80a27962c4d275564365c1d9c8e6c2a65a5501.jpg","name":"Taiane"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/2775870896","wmProperty":"like-of","wmId":851078,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-2775870896","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/aprilablon","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/44cb5745bc94536893dd891fc6feeed0e0e2c0b31c837d12f8ab69b2c13e9575.jpg","name":"April Ablon"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/1076490813729792001","wmProperty":"like-of","wmId":851079,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-1076490813729792001","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/HaqueJason","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/c7a4d9f7fa53b477dd944ddf9c36220b183d3ca40c92069bf199493128743f33.jpg","name":"Jason ☕☕🍵"},"published":null,"content":null}},{"node":{"wmTarget":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","wmSource":"https://brid-gy.appspot.com/like/twitter/waterproofheart/1304869916332429312/14695621","wmProperty":"like-of","wmId":851063,"type":"entry","url":"https://twitter.com/waterproofheart/status/1304869916332429312#favorited-by-14695621","likeOf":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","author":{"url":"https://twitter.com/_melanie","type":"card","photo":"https://webmention.io/avatar/pbs.twimg.com/e5bae88f22416101969068b78c911de69d5e6950d2b04985f21dd92ffdf15f8f.jpg","name":"Mel"},"published":null,"content":null}}]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/how-to-render-relevant-icons-based-on-content/","slug":"/blog/how-to-render-relevant-icons-based-on-content/","prev":{"id":"7fc2070c-63b0-51de-97b5-7af57016eb44","frontmatter":{"title":"Set Yourself Up For Success During Hacktoberfest","category":["tutorial"],"date":"2020-10-01T13:08:03.480Z","slug":"set-yourself-up-for-success-open-source-contributions","tags":["GitHub"],"redirects":null},"fields":{"slug":"/blog/set-yourself-up-for-success-open-source-contributions/"}},"next":{"id":"1bbbaff3-88a4-583f-9c17-3d5cdea354d8","frontmatter":{"title":"Hanselminutes Podcast: Leaning Into Learning In Public","category":["reflection"],"date":"2020-09-10T00:16:13.342Z","slug":"leaning-into-learning-in-public-with-monica-powell","tags":["Podcast"],"redirects":null},"fields":{"slug":"/blog/leaning-into-learning-in-public-with-monica-powell/"}}}},
"staticQueryHashes": ["1977783444","764694655"]}