Icons is a wrapper around svg icons we would commonly use in Bridge. You choose the type of Icon to display via the type prop. If not given, it defaults to `infoAlert1.

Alert Icons

These icons may be used in conjuction with Alert.

  
<Icon type="errorAlert" />
<Icon type="infoAlert" />
<Icon type="successAlert" />
<Icon type="warningAlert" />
<Icon type="errorAlert" />
<Icon type="infoAlert" />
<Icon type="successAlert" />
<Icon type="warningAlert" />

Form Icons

Icons used with forms.

  
<Icon type="fileDragDrop" />
<Icon type="opacityUploadFile" />
<Icon type="uploadFile" />
<Icon type="fileDragDrop" />
<Icon type="opacityUploadFile" />
<Icon type="uploadFile" />

Custom Icons

You can put in your custom svg paths as <Icon>'s child.

  
<Icon
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="#8B9199"
>
    <>
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="16" y1="13" x2="8" y2="13"></line>
        <line x1="16" y1="17" x2="8" y2="17"></line>
        <polyline points="10 9 9 9 8 9"></polyline>
    </>
</Icon>
<Icon
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="#8B9199"
>
    <>
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <line x1="16" y1="13" x2="8" y2="13"></line>
        <line x1="16" y1="17" x2="8" y2="17"></line>
        <polyline points="10 9 9 9 8 9"></polyline>
    </>
</Icon>

Common Props

Button includes COMMON props. Read Common Props for details and API. These common props will override component props such as the color. Any svg props also applies to Icon.

Component Props