import { Meta, ArgTypes } from '@storybook/blocks';

<Meta title="UI Components/Icons/Introduction" />

import Svg from './Svg';

# Icon

These icons are built with the SVG component so that they can scale for different use cases and various screen sizes and devices.

The SVG component sets a default height, width, title, and viewBox for the SVG, so these do not (and should not) need to be set in the individual Icon components.

## Props

The props vary from icon to icon, but most of them simply take in props that are passed straight through to the SVG component. See documentation for each icon for some examples, such as passing in a className to change the color of the icon.

In some cases, props can be passed in order to make other slight alterations to the icon. For example, the Microphone component takes in a `disabled` prop to toggle whether or not the icon will be rendered with a strikethrough.

## SVG Component Props

<ArgTypes of={Svg} />