Create wiki page: how to change the fill color of an svg

[roslynwythe]

Overview

We require a wiki page to describe our strategy for reusing svg icons across the website by changing the fill color via CSS.

Details

• So far the strategy has been implemented for the icon: _includes/svg/icon-slack.svg so focus on the Slack icon for examples
• Key elements are:
  • The goal is to store a single svg of each icon type and to apply a fill color when needed using CSS
    • CSS in sass/elements/_icons.scss specify that svg elements with class .icon within the project resource section are displayed with their "native" color, but those outside the project resource section will have a default fill color based on the current text color. The interior color of an svg is changed using the "fill" attribute.
    • The preferred HTML structure is to "wrap" the svg graphic file in an outer svg element which allows the outer svg to specify attributes specific to the instance such as the svg-specific attribute viewBox for scaling/positioning, aria attributes for accessibility, and class specifications for color. For an example see Replace slack-self-invite.svg with icon-slack.svg on CoP page #6141

Action Items

• We are currently in the process of moving the old wiki to the new website-wiki repo, so we will not be making any changes or additions to the old wiki at this time. Thus, we will be adding wiki content through a different process now. Read How to Contribute to the Wiki. Following the process given in How to Contribute to the Wiki when completing the remaining Action Items.
• Create a draft of the new wiki page in a comment in this issue.
• For review, move this issue to the "Questions/In Review" column and apply the label "ready for merge team".
• After approval, copy the link to the draft wiki page into the table in How to Contribute to the Wiki

Resources/Instructions

• This issue resulted from ER: duplicate slack icons and inconsistent locations #5758 and that ER contains links to several issues which implement the strategy described above.
• SCSS for icons: https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_icons.scss

[github-actions]

Hi @Maarimar, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[Maarimar]

Availability: 05/09-05/11
ETA: 05/11

[Maarimar]

Bellow is the draft of the new wiki page that explains how to customize the color of an SVG icon using CSS.

How to Customize the Fill Color of an SVG Icon

While each icon type has a single SVG source file, you can control its displayed color using CSS. Here's how:

Default Color Behavior:

• Icons within the project resource section inherit their native color defined in the SVG itself.

• Icons outside the project resource section inherit the default fill color based on the surrounding text color.

Customizing Color Outside Project Resources:

1. Wrap the SVG: Encase the original SVG within an outer SVG element.

2. Apply a Class: Assign a class to the outer SVG element to target it with specific CSS styles. This allows you to control the fill color without modifying the original SVG.

Example Code Snippet:

<svg role="img"  viewBox="0 0 100 100"  aria-labelledby="titleID">
   <title id="titleID">GitHub</title>
   {% include svg/icon-github-color.svg %}
<svg>

By following these guidelines, you can effectively reuse SVG icons with dynamic color control while ensuring accessibility for all users.

[roslynwythe]

Hi @Maarimar this looks very nice, but I have a tiny issue with the example code that you selected. Was that sample code found in the HfLA website codebase? Please use this example instead:

<svg role="img"  viewBox="0 0 100 100"  aria-labelledby="titleID">
   <title id="titleID">GitHub</title>
   {% include svg/icon-github-color.svg %}
<svg>

When that is complete please move this issue into "Questions/In Review" and apply the label "ready for dev lead". Thank you!

[github-actions]

@Maarimar

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, May 21, 2024 at 12:06 AM PST.}

[Maarimar]

Hi! @roslynwythe it was an example from the code base. It was created here #6141. I have no problem changing it for the one you provided instead.

[roslynwythe]

@Maarimar thank you for creating this wiki page. I went ahead and added the link to How to Contribute to the Wiki and checked that box so this issue is complete!