Overview

We need to update the code that renders the GitHub icon on the Wins page, to display _includes/svg/icon-github.svg instead of /assets/images/wins-page/icon-github-small.svg, in order to reduce the number of duplicate images.

Action Items

• Update the makeCards function in assets/js/wins.js and the HTML template in _includes/wins-page/wins-card-template.html/wins-card-template.html so that the reference to /assets/images/wins-page/icon-github-small.svg in the wins cards are changed to _includes/svg/icon-github.svg. The icon will be displayed using an svg html element instead of an img element.
• This issue does not include replacing the references to /assets/images/wins-page/icon-github-small.svg in the overlay (in the function updateOverlay)
• Note that svg tags do not support an alt attribute for accessibility. Read making SVGs WCAG compliant to understand how an SVG can be made accessible. Select a method described in the section "Use an ARIA label in the div HTML tag wrapping the SVG" or the section "Use an outer SVG with aria-label or aria-labelledby". Again this will require updates to assets/js/wins.jsand_includes/wins-page/wins-card-template.html/wins-card-template.html'
• Read Create wiki page: how to change the fill color of an svg #6654 to learn how to style svgs
• In this issue we will not modify the GitHub icon in the badge section which is /assets/images/wins-page/wins-badges/github.svg
• Remove the file currently used graphic file /assets/images/wins-page/icon-github-small.svg
• Use Docker to preview the Wins page (/wins) to ensure that the appearance and behavior of the Wins page is unchanged both in mobile and desktop views.

Resources/Instructions

• Wins webpage
• making SVGs WCAG compliant
• Create wiki page: how to change the fill color of an svg #6654
• This issue resulted from ER: duplicate GitHub icons and inconsistent locations #6903
• https://github.com/hackforla/website/blob/gh-pages/assets/js/wins.js
• HTML Template for wins card