Hi @izma-mujeeb, 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 :)

Availability: Mon-Fri 5PM - 9PM
ETA: Wednesday, October 2

I have a blocker.
I am trying to change the icon to include the svg file, however, every time I change the file, I get this error:
ERROR '/wins/_includes/svg/icon-github.svg' not found.
I am not sure why this error is coming up as the above is not a path that I am including in the JavaScript file. As well, since the svg file is under the _includes folder, I don't think these images can be used with an img tag, as these files are treated as static assets.

@izma-mujeeb @t-will-gillis
I have tried prepending the file path, _includes/svg/icon-github.svg, with each of: /wins/, /, and ../../ and none resolved the issue. All still give the same error message:

ERROR `/wins/_includes/svg/icon-github.svg' not found.

Update

After prepending the file path with ../../ and using tab completion to finish the path, I get a new error:

`/_includes/svg/icon-github.svg' not found.

At the office hour today, we looked through other files that use svg images in a JavaScript file, and tested to see if the following URL would work: {% include svg/icon-github.svg %}. Unfortunately, this link did not work and the Github icon is not being displayed on the Wins page.

These are the svgs that are in _includes folders
https://github.com/hackforla/website/tree/gh-pages/_includes/svg

Here is the search I used

• https://github.com/search?q=repo%3Ahackforla%2F[REPLACE WITH NAME OF FILE]+language%3AJavaScript+&type=code
• example of not found: https://github.com/search?q=repo%3Ahackforla%2Fwebsite+toolkit-hero.svg+language%3AJavaScript+&type=code
• example of file found in a JavaScript file: https://github.com/search?q=repo%3Ahackforla%2Fwebsite+icon-hamburger-nav.svg+language%3AJavaScript+&type=code

Here is the JavaScript file that has references to svgs that are in the _includes folder
https://github.com/hackforla/website/blob/gh-pages/assets/js/hamburger-nav.js

At the office hour today, we looked through other files that use svg images in a JavaScript file, and tested to see if the following URL would work: {% include svg/icon-github.svg %}. Unfortunately, this link did not work and the Github icon is not being displayed on the Wins page.

• @izma-mujeeb I believe that {% include svg/icon-github.svg %} is the correct liquid statement to reference the svg. If it is not working, I'll need to see the surrounding js and html code. Previously the HTML was using an img tag and that will have to be changed. For the purposes of styling and accessibility, we will probably want to wrap the svg in an outer svg. You can find sample code for that in Update wiki page with another method for making SVGs WCAG compliant #6653 (comment) which is listed as a resource item in this issue. If you wish, you can create a Draft PR so that I can see your code.

@izma-mujeeb please submit a draft pr. You submit a PR as normal and then change it to draft by clicking on the link that looks like this, under the assignees. Once you done that, stick this issue back into the questions column with a ready for dev lead label

@ExperimentsInHonesty @roslynwythe I submitted a PR and have moved this issue back into questions column with the ready for dev lead label.
#7569

@roslynwythe spoke with @izma-mujeeb and revised the issue to make it clearer and reduce scope. See details in PR