Article preview component solution with SCSS

Hi Bundasse!

Your project looks great, and this might be a helpful tip.

To change the color of an SVG, you have to:

• Put the SVG code directly into the HTML, if you put the src of the <img> as the SVG file that is in another folder it won't be able to target it
• Add a class the the beginning tag of the SVG
• In the CSS the selector should be the class name and then the path
• The property name should be fill for the background of the SVG and stroke for the outline

HTML

<svg
            aria-labelledby="Facebook"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            class=socialIcon >
             <title id="Facebook" lang="en">Facebook icon</title>
            <path
              fill="#FFF"
              d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
            />
          </svg>

CSS

 .socialIcon:hover path {
      cursor: pointer;
      fill: var(--second-color);
    }

Hope you found this helpful!

• Let's connect on LinkedIn! - @Eileenpk