refactor Icon

Author: Lukas742

packages/main/src/webComponents/Icon/Icon.stories.mdx

@@ -0,0 +1,48 @@
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs/blocks';
+import {Icon} from '@ui5/webcomponents-react/lib/Icon';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import {CSSProperties} from 'react';
+
+import {createSelectArgTypes} from '@shared/stories/createSelectArgTypes';
+import {DocsHeader} from '@shared/stories/DocsHeader';
+
+<Meta
+    title="UI5 Web Components / Icon"
+    component={Icon}
+    argTypes={{
+        ...createSelectArgTypes({}),
+        slot: {control: {disable: true}},
+        ref: {control: {disable: true}},
+        style: {
+            type: CSSProperties,
+            description:
+                'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
+        },
+        className: {
+            type: 'string',
+            description:
+                'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
+        },
+        tooltip: {type: 'string', description: 'A tooltip which will be shown on hover'}
+    }}
+    args={{
+        name: 'employee',
+        style: {},
+        className: '',
+        tooltip: '',
+        slot: '',
+        ref: null
+    }}
+/>
+
+<DocsHeader/>
+
+<Canvas>
+    <Story name="Default">
+        {(args) => {
+            return <Icon {...args} />;
+        }}
+    </Story>
+</Canvas>
+
+<ArgsTable story="."/>