Document passing of custom components as icons

Author: piemonkey

stories/4-utilities/Icons.stories.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import * as iconStories from "../5-components/Brand/AuIcon.stories";
+
+<Meta title="Utilities/Icons" />
+
+# Icons
+
+Appuniversum includes many SVG icons that can be used by passing the name of the icon into the component, e.g.
+
+```
+<AuButton @icon="book">Button Text</AuButton>
+```
+
+Alternatively, wherever you can pass an icon name you can instead pass an Ember component that will be rendered instead of the default SVG in the AuIcon component.
+This can be used, for example, to use inline SVGs or PNG icons.
+
+Although the Ember component will not be passed any arguments, it's possible to pass them using the `component` helper.
+See [AuIcon docs](/docs/components-brand-auicon--with-custom-icon) for a live example.
+
+```
+<AuButton @icon={{component 'custom-icon' iconName='some-name'}}>Button Text</AuButton>
+```
+
+All the available icons are listed here:
+
+<Canvas>
+  <Story story={iconStories.Icons} />
+</Canvas>

stories/5-components/Brand/AuIcon.stories.js

@@ -42,6 +42,17 @@ const Template = (args) => ({
   context: args,
 });
 
+const CustomIconTemplate = (args) => ({
+  template: hbs`
+    <AuIcon
+      @icon={{component 'au-icon' icon=this.icon}}
+      @size={{this.size}}
+      @alignment={{this.alignment}}
+      @ariaHidden={{this.ariaHidden}}
+    />`,
+  context: args,
+});
+
 const IconList = (args) => ({
   template: hbs`
     <AuIconList />
@@ -57,5 +68,13 @@ Component.args = {
   ariaHidden: true,
 };
 
+export const WithCustomIcon = CustomIconTemplate.bind({});
+WithCustomIcon.args = {
+  icon: 'info-circle',
+  size: 'large',
+  alignment: '',
+  ariaHidden: true,
+};
+
 export const Icons = IconList.bind({});
 IconList.args = {};

stories/5-components/Notifications/Toasts/Documentation.stories.mdx

@@ -37,7 +37,8 @@ All these methods have the same API. The only difference is the default icon and
 ```ts
 interface ToastOptions {
   type?: "info" | "success" | "warning" | "error"; // Default depends on the used display method
-  icon?: string; // Any valid Appuniversum icon name, default depends on the used display method
+  icon?: string | Component<Record<string, never>>; // Any valid Appuniversum icon name, default
+  // depends on the used display method, or an ember component requiring no arguments
   timeOut?: number; // delay in milliseconds after which the toast auto-closes
   closable?: boolean; // Can the toast be closed by users, defaults to `true`
 }