Merge pull request #210 from microsoft/riacarmin/xx/add-svg-attribute…

…s-to-icon

[Icon] Adds SVG attributes to Icon

change/@microsoft-arbutus-icon-9273ca1f-0b56-4f84-81a9-0caceac42555.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds SVG attributes to Icon",
+  "packageName": "@microsoft/arbutus.icon",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

components/icon/src/icon/icon.tsx

@@ -14,6 +14,7 @@ export const Icon: FC<IconProps> = ({
   iconName,
   size = 'medium',
   isInline,
+  ...svgAttributes
 }) => {
   const Icon = useMemo(() => paths[iconName], [iconName]);
 
@@ -52,6 +53,7 @@ export const Icon: FC<IconProps> = ({
       className={rootClasses}
       fill="currentColor"
       {...a11yProps}
+      {...svgAttributes}
     >
       {label && <title id={a11yId}>{label}</title>}
       <Icon />

components/icon/src/icon/icon.types.ts

@@ -1,3 +1,4 @@
+import { SVGAttributes } from 'react';
 import type { sizeClasses } from './icon.styles';
 import type { paths } from './icons';
 
@@ -56,4 +57,4 @@ export type IconProps = {
    * Sets the Icon to be an inline element.
    */
   isInline?: boolean;
-};
+} & SVGAttributes<SVGSVGElement>;

package.json

@@ -54,20 +54,20 @@
     "@babel/preset-typescript": "^7.23.2",
     "@griffel/react": "^1.5.18",
     "@microsoft/arbutus.aside-navigation": "1.0.7",
-    "@microsoft/arbutus.bookmark-tile": "1.0.12",
+    "@microsoft/arbutus.bookmark-tile": "1.0.13",
     "@microsoft/arbutus.code-snippet": "1.0.6",
-    "@microsoft/arbutus.command": "1.0.9",
+    "@microsoft/arbutus.command": "1.0.10",
     "@microsoft/arbutus.divider": "1.0.4",
     "@microsoft/arbutus.file-to-string": "1.0.4",
-    "@microsoft/arbutus.icon": "1.2.1",
-    "@microsoft/arbutus.icon-button": "1.1.2",
-    "@microsoft/arbutus.link": "1.1.10",
-    "@microsoft/arbutus.main-navigation": "1.0.10",
-    "@microsoft/arbutus.mark-list": "1.0.11",
-    "@microsoft/arbutus.recommendation-tile": "1.0.12",
+    "@microsoft/arbutus.icon": "1.3.0",
+    "@microsoft/arbutus.icon-button": "1.1.3",
+    "@microsoft/arbutus.link": "1.1.11",
+    "@microsoft/arbutus.main-navigation": "1.0.11",
+    "@microsoft/arbutus.mark-list": "1.0.12",
+    "@microsoft/arbutus.recommendation-tile": "1.0.13",
     "@microsoft/arbutus.tabs": "1.0.7",
     "@microsoft/arbutus.text": "1.0.6",
-    "@microsoft/arbutus.theme-switch": "1.0.9",
+    "@microsoft/arbutus.theme-switch": "1.0.10",
     "@microsoft/arbutus.theming": "1.1.2",
     "@microsoft/arbutus.tile": "1.0.6",
     "@microsoft/arbutus.ts": "0.0.2",