Import React icons inside stylesheet CSS file

Question

I am working on a gatsby project and I am using React Icons.

Inside assets/css/style.css I have this code:

.testimonial-item:before {
    color: #eceff5;
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-size: 88px;
    left: 25%;
    position: absolute;
    top: 49%;
    z-index: 1;
}

As you can see above my regular CSS code uses regular embedded font awesome icons. If you were to add react-icons inside a js file its easy you can simply embed it like this:

import { FaStar } from "react-icons/fa"
<FaStar></FaStar>

However this is not the case with regular CSS. My question is how can I change embed the react-icons in replace with the content property icon on my CSS which uses only regular embedded font awesome?

Is there a way to do this?

Please refer this: https://github.com/react-icons/react-icons/issues/246 . Whenever you ask questions, please explore the required things in resp GitHub repo first. — Aniruddha Shevle, Oct 14 '20 at 10:31
It's the same concept dude. The same logic can be used here as well. — Aniruddha Shevle, Oct 14 '20 at 13:51
I am trying to replace an "icon" (which is really only faked using css' border-radius and background) from a library I am using. Did you find a solution for this issue? — kalabalik, Apr 21 '21 at 22:27

score 2 · Answer 1 · answered Apr 03 '22 at 23:40

I did this so that I could add react-icon pseudo elements to content pulled in from an external CMS over a REST API. I didn't have access to the icons in the CMS.

React Icons are being rendered in my react project as SVGs. Eg this icon:

import { RiHeartPulseFill } from 'react-icons/ri'
<RiHeartPulseFill/>

comes out like

<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0H24V24H0z"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5-1.978-1.187-7.084-3.937-9.132-8.5h4.698l.934-1.556 3 5L13.566 13H17v-2h-4.566l-.934 1.556-3-5L6.434 11H2.21C2.074 10.363 2 9.696 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></g></svg>

You can use this code in the "background-image: url" property of a pseudo element. First url encode it (you can use https://www.urlencoder.org/)

%3Csvg%20stroke%3D%22currentColor%22%20fill%3D%22currentColor%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2024%2024%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200H24V24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16.5%203C19.538%203%2022%205.5%2022%209c0%207-7.5%2011-10%2012.5-1.978-1.187-7.084-3.937-9.132-8.5h4.698l.934-1.556%203%205L13.566%2013H17v-2h-4.566l-.934%201.556-3-5L6.434%2011H2.21C2.074%2010.363%202%209.696%202%209c0-3.5%202.5-6%205.5-6C9.36%203%2011%204%2012%205c1-1%202.64-2%204.5-2z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E

And then put this into the background image property in your CSS:

.blog-container .info-block h4:before {
  content: url(data:image/svg+xml,%3Csvg%20stroke%3D%22red%22%20fill%3D%22red%22%20stroke-width%3D%220%22%20viewBox%3D%220%200%2024%2024%22%20height%3D%221em%22%20width%3D%221em%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200H24V24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16.5%203C19.538%203%2022%205.5%2022%209c0%207-7.5%2011-10%2012.5-1.978-1.187-7.084-3.937-9.132-8.5h4.698l.934-1.556%203%205L13.566%2013H17v-2h-4.566l-.934%201.556-3-5L6.434%2011H2.21C2.074%2010.363%202%209.696%202%209c0-3.5%202.5-6%205.5-6C9.36%203%2011%204%2012%205c1-1%202.64-2%204.5-2z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
}

If you want to change the colour and other properties of the SVG, do so in the SVG meta data of the original SVG code eg:

stroke="currentColor" 
fill="currentColor" 
stroke-width="0" 
viewBox="0 0 24 24" 
height="1em" 
width="1em"

I found this that suggests you can do it using the mask-url property in CSS which would probably be easier but I couldn't make it work: Change SVG fill color in :before or :after CSS

Import React icons inside stylesheet CSS file

1 Answers1