Icon components as SVG imports

packages/ds-react-core/package.json

@@ -59,6 +59,7 @@
     "storybook": "^8.4.7",
     "typescript": "^5.7.2",
     "vite": "^6.0.3",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

packages/ds-react-core/src/ui/Icon/Icon.css

@@ -0,0 +1,13 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+
+.ds.icon {
+  --color-icon: var(--color-icon-default);
+
+  /* TODO: restrict width, height, inline block, etc */
+  /* considerations for animation (spinning icons) */
+  /* transforms: rotated chevrons */
+
+  &:not(.colored) path[fill] {
+    fill: var(--color-icon);
+  }
+}

packages/ds-react-core/src/ui/Icon/Icon.stories.tsx

@@ -0,0 +1,17 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+
+import type { Meta } from "@storybook/react";
+import type { StoryFn } from "@storybook/react";
+import Component from "./Icon.js";
+import { PlusIcon, SuccessIcon } from "./icons/index.js";
+
+const meta = {
+  title: "Icon",
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+
+export const Plus: StoryFn<typeof PlusIcon> = () => <PlusIcon />;
+
+export const Success: StoryFn<typeof SuccessIcon> = () => <SuccessIcon />;

packages/ds-react-core/src/ui/Icon/Icon.tsx

@@ -0,0 +1,34 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+import type React from "react";
+import type { BaseIconProps } from "./types.js";
+import "./Icon.css";
+
+const componentCssClassName = "ds icon";
+
+/**
+ * Base Icon component. This can be used to render any SVG
+ * @returns {React.ReactElement} - Rendered Icon
+ */
+const Icon = ({
+  id,
+  children,
+  className,
+  style,
+  colored = false,
+  ...props
+}: BaseIconProps): React.ReactElement => {
+  return (
+    <i
+      id={id}
+      style={style}
+      className={[componentCssClassName, colored && "colored", className]
+        .filter(Boolean)
+        .join(" ")}
+      {...props}
+    >
+      {children}
+    </i>
+  );
+};
+
+export default Icon;

packages/ds-react-core/src/ui/Icon/icons/PlusIcon/PlusIcon.tsx

@@ -0,0 +1,24 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+import type React from "react";
+import Icon from "../../Icon.js";
+import IconSvg from "../../svg/plus.svg?react";
+import type { PlusIconProps } from "./types.js";
+
+/**
+ * description of the PlusIcon component
+ * @returns {React.ReactElement} - Rendered PlusIcon
+ */
+const PlusIcon = ({
+  id,
+  className,
+  style,
+  ...props
+}: PlusIconProps): React.ReactElement => {
+  return (
+    <Icon id={id} className={className} style={style} {...props}>
+      <IconSvg />
+    </Icon>
+  );
+};
+
+export default PlusIcon;

packages/ds-react-core/src/ui/Icon/icons/PlusIcon/index.ts

@@ -0,0 +1,3 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+export { default as PlusIcon } from "./PlusIcon.js";
+export * from "./types.js";

packages/ds-react-core/src/ui/Icon/icons/PlusIcon/types.ts

@@ -0,0 +1,4 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+import type { IconProps } from "../../types.js";
+
+export interface PlusIconProps extends IconProps {}

packages/ds-react-core/src/ui/Icon/icons/SuccessIcon/SuccessIcon.tsx

@@ -0,0 +1,23 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+import type React from "react";
+import Icon from "../../Icon.js";
+import IconSvg from "../../svg/success.svg?react";
+import type { SuccessIconProps } from "./types.js";
+/**
+ * description of the Icon component
+ * @returns {React.ReactElement} - Rendered Icon
+ */
+const SuccessIcon = ({
+  id,
+  className,
+  style,
+  ...props
+}: SuccessIconProps): React.ReactElement => {
+  return (
+    <Icon id={id} colored className={className} style={style} {...props}>
+      <IconSvg />
+    </Icon>
+  );
+};
+
+export default SuccessIcon;

packages/ds-react-core/src/ui/Icon/icons/SuccessIcon/index.ts

@@ -0,0 +1,3 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+export { default as SuccessIcon } from "./SuccessIcon.js";
+export * from "./types.js";

packages/ds-react-core/src/ui/Icon/icons/SuccessIcon/types.ts

@@ -0,0 +1,4 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+import type { IconProps } from "../../types.js";
+
+export interface SuccessIconProps extends IconProps {}

packages/ds-react-core/src/ui/Icon/icons/index.ts

@@ -0,0 +1,2 @@
+export * from "./PlusIcon/index.js";
+export * from "./SuccessIcon/index.js";

packages/ds-react-core/src/ui/Icon/index.ts

@@ -0,0 +1,4 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+export { default as Icon } from "./Icon.js";
+export * from "./types.js";
+export * from "./icons/index.js";

packages/ds-react-core/src/ui/Icon/types.ts

@@ -0,0 +1,33 @@
+/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
+import type React from "react";
+
+/**
+ * The props for all icons
+ */
+export interface IconProps {
+  /* A unique identifier for the Icon */
+  id?: string;
+  /* Additional CSS classes */
+  className?: string;
+  /*
+    Optional child icon
+    TODO should specific icon components be allowed to have children? If not we can set this to `never` or remove it.
+    TODO this isn't 100% type-safe.
+      We could specify the child must be something like React.ReactElement<SVGElement> to allow only SVG as children.
+      But React `children` can only said to be JSX elements, so we'd need to pass the SVG as a prop rather than a child like this:
+      <Icon svg={IconSvg} />
+  */
+  children?: React.ReactNode;
+  /* Inline styles */
+  style?: React.CSSProperties;
+}
+
+/**
+ * The props for the abstract base icon that other icons are composed of
+ */
+export interface BaseIconProps extends IconProps {
+  /* Whether the icon defines its own coloring. If true, themed coloring will be disabled. */
+  colored?: boolean;
+  /** The child icon. Required for compositions of the base Icon component. */
+  children: React.ReactNode;
+}

packages/ds-react-core/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

packages/ds-react-core/vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [svgr(), react(), tsconfigPaths()],
 });

packages/styles/src/tokens.css

@@ -7,8 +7,10 @@
   --color-palette-white: #fff;
   --color-palette-black: #000;
 
-  --color-background-default: var(--color-palette-white);
   --color-text-default: var(--color-palette-black);
+  --color-icon-default: var(--color-text-default);
+
+  --color-background-default: var(--color-palette-white);
   --color-background-hover: rgba(242, 242, 242, 1);
   --color-background-active: rgba(235, 235, 235, 1);
   --color-border-high-contrast: rgba(0, 0, 0, 0.56);