Organize SVG assets

Feature Description

Currently we have a flat directory of svg files in assets/svg which includes mostly icons, but also has some vector graphics. It would be good to organize these accordingly based on their type since these are quite different in their use.

The main difference with icons is that these are essentially a single color which should be inherited (i.e. fill=currentColor) whereas graphics may be many colors which don’t change. Graphics are usually much larger in terms of their markup as well having many complex shapes, strokes, and fills.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• SVG assets should be organized into one of two new subdirectories within assets/svg: icons or graphics based on their purpose and content
  • All icons should be simple single-color svg elements which inherit their stroke/fill color from the current color via CSS (i.e. currentColor)
    • Any icons with hardcoded colors should be updated accordingly and the application of its color should be moved to a relevant component/stylesheet
  • All graphics should be svg “images” that should always have specific color(s) that should always be used (e.g. Site Kit side kicks)

Implementation Brief

• Move the following SVGs to new assets/svg/icons folder:
  • assets/svg/check.svg
  • assets/svg/close-dark.svg
  • assets/svg/close.svg
  • assets/svg/date-range.svg
  • assets/svg/device-size-desktop-icon.svg
  • assets/svg/device-size-mobile-icon.svg
  • assets/svg/error.svg
  • assets/svg/exclamation.svg
  • assets/svg/help.svg
  • assets/svg/idea-hub-*.svg
  • assets/svg/info-icon.svg
  • assets/svg/keyboard-backspace.svg
  • assets/svg/lock.svg
  • assets/svg/magnifying-glass.svg
  • assets/svg/pencil.svg
  • assets/svg/suggestion-icon.svg
  • assets/svg/survey-*.svg
  • assets/svg/trash.svg
  • assets/svg/warning-icon.svg
  • assets/svg/warning.svg
• Review the list of SVGs from the list above to remove hardcoded colors, meaning fill should not be a color but set to currentColor.
  • Add/update styles for icons which previously had hardcoded fill so that the icons now rely on the color CSS property.
• Remaining icons from assets/svg folder should be moved to new assets/svg/graphics folder.
• Update codebase to reference new SVG paths where they are used.

Test Coverage

• No new tests should be added.

Visual Regression Changes

• None

QA Brief

• Ensure icons are in their correct locations. ( idea-hub-notification.svg is in graphics )
• Ensure VRT runs correctly.
• Check icons and graphics throughout the interface for visual differences (including different feature flags)

Changelog entry

• N/A

[mohitwp]

QA update ✅

Verified

1. SVG assets organized into one of two new subdirectories within assets/svg: icons or graphics.
2. All listed svg’s under IB are move to assets/svg/icons
3. All icons have inherit their stroke/fill color from the current color via CSS (i.e. currentColor)
4. idea-hub-notification.svg is in graphics folder.
5. Verified graphics and icons.

[asvinb]

Sounds good @aaemnnosttv . Somehow I forgot to add to update the CSS styles 🤦