import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as stories from './icons.stories.js';

import iconsKeyshape_1 from './icons-keyshape-1.png';
import iconsKeyshape_2 from './icons-keyshape-2.png';
import iconsKeyshape_3 from './icons-keyshape-3.png';

<Meta title="Components/Icons" />

# Icons

An icon’s first job is to guide users to where they need to go. They need to be both recognizable and intuitive.

They visually express objects, actions and ideas, and also save screen real estate and enhance aesthetic appeal.

Plus, most apps and websites use icon patterns which are familiar to users.

Icons also visually break up the content, making it less intimidating. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user’s attention.

## Background
<Story name='Background' height='60px'>{stories.Background()}</Story>

### Code
```html
<svgicon
  name="2horpanel"
  class="background"
  width="36"
  height="36"
/>

<svgicon
  name="2vertpanel"
  class="background"
  width="36"
  height="36"
/>
```

## No background
<Story name='No Background' height='60px'>{stories.NoBackground()}</Story>

### Code
```html
<svgicon
  name="2horpanel"
  width="36"
  height="36"
/>

<svgicon
  name="2vertpanel"
  width="36"
  height="36"
/>
```

## Social
<Story name='Social' height='60px'>{stories.Social()}</Story>


### Code
```html
<svgicon
  name="social/facebook"
  width="36"
  height="36"
  color="#8300BF"
/>

<svgicon
  name="social/linkedin"
  width="36"
  height="36"
  color="#8300BF"
/>

<svgicon
  name="social/twitter"
  width="36"
  height="36"
  color="#8300BF"
/>
```

## Keyshapes

To maintain consistent sizes for basic shapes and proportions across the icon set keyshapes are used for icons. This allows for a visual familarity and ease to view multiple icons together.

<img src={iconsKeyshape_1} alt="screenshot of four icons and their keyshapes" />

Icons should match the keyshape that best represents the icon’s metaphor

<img width="600" src={iconsKeyshape_2} alt="screenshot of two icons and their keyshapes" />

Icons should not be forced to be fully within the keyshape.

<img width="600" src={iconsKeyshape_2} alt="screenshot of two icons and their keyshapes, which have not been forced" />

## Accessibility

Where possible icons should be paired with appropriate text to provide clarity.
All icons should have aria-labels that explain what the icon does, and not what the icon looks like. i.e “Send mail” rather than “Envelope”


## Usage

This utilizes the library `[vue-svgicon@3.2.9](https://github.com/MMF-FE/svgicon/tree/3.x)`.

## Props

### icon / name

icon name.

```html
<svgicon icon="vue"></svgicon> <svgicon name="vue"></svgicon>
```

### dir

The direction of icon.

```html
<svgicon name="arrow" width="50" height="50" dir="left"></svgicon>
<svgicon name="arrow" width="50" height="50" dir="up"></svgicon>
<svgicon name="arrow" width="50" height="50" dir="right"></svgicon>
<svgicon name="arrow" width="50" height="50" dir="down"></svgicon>
```

### fill

Whether to fill the path/shape. Default value is **true**

```html
<svgicon name="arrow" width="50" height="50"></svgicon>
<svgicon name="arrow" width="50" height="50" :fill="false"></svgicon>
```

You can use **r-color** to reverse the fill property

```html
<!-- the first one is fill(default), the second use stroke -->
<svgicon
    name="clock"
    color="#8A99B2 r-#1C2330"
    width="100"
    height="100"
></svgicon>
<!-- the first one is stoke, the second is fill -->
<svgicon
    name="clock"
    color="#8A99B2 r-#1C2330"
    width="100"
    height="100"
    :fill="false"
></svgicon>
```

### width / height

Specify the size of icon. Default value is **16px / 16px**. Default unit is **px**

```html
<svgicon name="arrow" width="50" height="50"></svgicon>
<svgicon name="arrow" width="10em" height="10em"></svgicon>
```

### scale

Scale icon size, it will overwrite width/height prop

```html
<svgicon name="arrow" scale="10"></svgicon>
<svgicon name="arrow" scale="10" width="10em" height="10em"></svgicon>
```

### color

Specify the color of icon. Default value is **inherit**.

```html
<p style="color: darkorange">
    <svgicon name="arrow" width="50" height="50"></svgicon>
    <svgicon name="arrow" width="50" height="50" color="red"></svgicon>
    <svgicon name="arrow" width="50" height="50" color="green"></svgicon>
    <svgicon name="arrow" width="50" height="50" color="blue"></svgicon>
</p>
```

If the icon is mutil path/shape, you can use mutil color. It is defined in the order of path/shape.

```html
<svgicon name="vue" width="100" height="100" color="#42b983 #35495e"></svgicon>
```

Also, you can use CSS to add colors.

```html
<svgicon class="vue-icon" name="vue" width="100" height="100"></svgicon>
```

```css
.vue-icon path[pid='0'] {
    fill: #42b983;
}

.vue-icon path[pid='1'] {
    fill: #35495e;
}
```