Svgicon custom colors (#598)

Author: Horay

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -3,6 +3,7 @@ import { SVGIcon } from ".";
 import { FlexContainer } from "../container";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Text } from "../text";
+import { theme } from "../../index";
 
 <Meta title="Components/SVGIcon" component={SVGIcon} />
 
@@ -38,6 +39,7 @@ import { Text } from "../text";
       <SVGIcon name="dashboard" color="danger" />
       <SVGIcon name="dashboard" color="warning" />
       <SVGIcon name="dashboard" color="notification" />
+      <SVGIcon name="dashboard" color={theme.color.support.purple} />
     </FlexContainer>
   </Story>
 </Canvas>

src/components/svgicon/SVGIcon.stories.mdx

@@ -5,15 +5,15 @@ import { SingleColors } from "../../theme/config";
 import { getPath, PathName } from "./paths";
 
 const StyledSVGIcon = styled.svg<Pick<SVGIconProps, "color" | "size">>`
-  fill: ${theme.color.text.text01};
+  fill: ${(props) => props.color || theme.color.text.text01};
   width: ${theme.iconSize.md};
   height: ${theme.iconSize.md};
   vertical-align: middle;
 
   ${({ color }) =>
     color &&
     css`
-      fill: ${theme.colors[color]};
+      fill: ${theme.colors[color] || color};
     `}
 
   ${({ size }) =>