DS - Update Icon component to support SVG sprites

[narin]

Description

The Icon component is currently set up to support standalone .svg files which we have for each of our current icons. VADS uses a sprite sheet which is a single .svg file that contains all of their icons. We need to update our Icon component to support this sprite sheet since we want to use the same icons that VADS does.

Sample code snippet here:

// Icon.js
import React from 'react';
import { SvgXml } from 'react-native-svg';

// SVG sprite sheet content (loaded as a string)
import svgSprite from './icons.svg';

const Icon = ({ name, width = 24, height = 24, fill = 'black' }) => {
  // Extract the specific icon from the SVG sprite sheet
  const iconXml = svgSprite.match(new RegExp(`<symbol id="${name}"([\\s\\S]*?)<\/symbol>`));

  if (!iconXml) {
    console.warn(`Icon '${name}' not found in sprite sheet`);
    return null;
  }

  // Wrap the extracted SVG content with SvgXml component
  return (
    <SvgXml
      xml={`<svg width="${width}" height="${height}" fill="${fill}">${iconXml[0]}</svg>`}
      width={width}
      height={height}
    />
  );
};

export default Icon;

Acceptance Criteria

- [ ] ~~Determine feasibility of using the VADS sprite sheet~~ - Ticket #244 made a script to extract them to normal SVGs from sprite sheet - [ ] ~~Update Icon component to support VADS svg sprite sheet from #244~~ - Ticket #244 made a script to extract them to normal SVGs from sprite sheet - [x] Update the Icon story to list all of the icons from the sprite sheet in its drop down - Late additions: - [x] Make script to automatically parse the icons so it isn't a manual process to keep updated as icons ebb/flow - [x] Clean up Icon component of having 2nd fill and stroke colors as now all icons are single color - [x] Update existing icons as needed for Link/Alert components