diff --git a/change/@microsoft-arbutus-icon-9273ca1f-0b56-4f84-81a9-0caceac42555.json b/change/@microsoft-arbutus-icon-9273ca1f-0b56-4f84-81a9-0caceac42555.json new file mode 100644 index 00000000..33023e8e --- /dev/null +++ b/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": "akimalunar@gmail.com", + "dependentChangeType": "patch" +} diff --git a/components/icon/src/icon/icon.tsx b/components/icon/src/icon/icon.tsx index 04171550..92ca3afb 100755 --- a/components/icon/src/icon/icon.tsx +++ b/components/icon/src/icon/icon.tsx @@ -14,6 +14,7 @@ export const Icon: FC = ({ iconName, size = 'medium', isInline, + ...svgAttributes }) => { const Icon = useMemo(() => paths[iconName], [iconName]); @@ -52,6 +53,7 @@ export const Icon: FC = ({ className={rootClasses} fill="currentColor" {...a11yProps} + {...svgAttributes} > {label && {label}} diff --git a/components/icon/src/icon/icon.types.ts b/components/icon/src/icon/icon.types.ts index f0b2a3d5..50082e2c 100755 --- a/components/icon/src/icon/icon.types.ts +++ b/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; diff --git a/package.json b/package.json index ad1565b7..15ab77b4 100755 --- a/package.json +++ b/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",