Article preview component solution with SCSS

Community feedback

• 

  Eileen dangelo•1,600

  @Eileenpk

  Posted about 2 years ago

  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

  01

  Marked as helpful