feat: add custom example

.storybook/preview.tsx

@@ -9,6 +9,7 @@ import { withThemeByDataAttribute } from '@storybook/addon-themes';
 import { themes } from '@storybook/theming';
 import { BrowserRouter, useNavigate } from 'react-router-dom';
 
+import custom from './custom.svg';
 import { allModes } from './modes';
 
 import '../packages/components/src/styles/themes.css';
@@ -30,6 +31,19 @@ fetch(sprite)
 		console.log('Failed to fetch sprite', err);
 	});
 
+fetch(custom)
+	.then(async (response) => response.text())
+	.then((data) => {
+		const parser = new DOMParser();
+		const content = parser.parseFromString(data, 'image/svg+xml').documentElement;
+		content.id = 'app-icons-sprite';
+		content.style.display = 'none';
+		document.body.appendChild(content);
+	})
+	.catch((err) => {
+		console.log('Failed to fetch sprite', err);
+	});
+
 const RouterProvider = ({ children }: { children: ReactNode }) => {
 	const navigate = useNavigate();
 	return (

packages/components/stories/Modal.stories.tsx

@@ -56,7 +56,12 @@ const renderModal = (args: Story['args'], destructive = false) => (
 						<>
 							<div slot="header">
 								{destructive && (
-									<Icon name="warning" size="medium" fill="var(--lp-color-fill-feedback-warning)" />
+									<Icon
+										name="warning"
+										size="medium"
+										variant={null}
+										fill="var(--lp-color-fill-feedback-warning)"
+									/>
 								)}
 								<Heading slot="title">Title</Heading>
 								<IconButton

packages/icons/src/Icon.tsx

@@ -57,7 +57,7 @@ const Icon = ({
 			aria-hidden={props['aria-hidden'] ?? (!props['aria-labelledby'] && !props['aria-label'])}
 			focusable={focusable}
 			role={role}
-			className={icon({ size, variant: props.fill ? null : variant, className })}
+			className={icon({ size, variant, className })}
 			{...props}
 			{...labelProps}
 		>

packages/icons/stories/Icon.stories.tsx

@@ -1,21 +1,24 @@
-import type { Meta, ReactRenderer } from '@storybook/react';
+import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { ArgsStoryFn } from '@storybook/types';
 
 import { CopyToClipboard } from '@launchpad-ui/clipboard';
 
 import { Icon } from '../src';
 import { icons } from '../src/types';
 
-export default {
+const meta: Meta<typeof Icon> = {
 	component: Icon,
 	title: 'Foundations/Icons',
-	description: 'Icons supplement content and represent an action or feature within LaunchDarkly.',
 	parameters: {
 		status: {
 			type: import.meta.env.STORYBOOK_PACKAGE_STATUS__ICONS,
 		},
 	},
-} as Meta;
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
 
 const render: ArgsStoryFn<ReactRenderer> = () => (
 	<div
@@ -61,3 +64,9 @@ const render: ArgsStoryFn<ReactRenderer> = () => (
 export const Sprites = {
 	render,
 };
+
+export const Custom: Story = {
+	args: {
+		children: <use href="#app-icon-smile" />,
+	},
+};