{"size": 1370, "ext": "js", "max_stars_repo_path": "packages/core/icon-file-type/docs/0-intro.js", "max_stars_repo_name": "HeartCommunity/uiKit", "max_stars_repo_stars_event_min_datetime": "2020-08-09T09:10:20.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-09T09:10:20.000Z", "max_issues_repo_path": "packages/core/icon-file-type/docs/0-intro.js", "max_issues_repo_name": "fnamazing/uiKit", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/core/icon-file-type/docs/0-intro.js", "max_forks_repo_name": "fnamazing/uiKit", "max_forks_repo_forks_event_min_datetime": "2019-10-02T19:17:44.000Z", "max_forks_repo_forks_event_max_datetime": "2019-12-25T11:44:11.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 2, "avg_line_length": 24.4642857143, "max_line_length": 109, "alphanum_fraction": 0.6817518248}
// @flow
import React from 'react';
import { md, code, Example } from '@findable/docs';

const PitchSentence = () => (
  <p>
    Below is an icon explorer just for file-type icons. You can view an icon
    explorer that includes all icons at the{' '}
    <a href="/packages/core/icon">main icons package documentation</a>
  </p>
);

export default md`
This package includes the field-type icons. These are a subset of icons with the following unique attributes:

- They are represented at only 3 sizes, each size being a unique svg
    - a 16*16px icon
    - a 24*24px icon
    - a 48*64px icon
- They do not have the sizing prop.
- They have specific colours by default.
- they have a different API to icons in the \`@findable/icons\` package.

## Usage

${code`
import AudioIcon from '@findable/icon-file-type/glyph/audio/16';

const MyComponent = () => (
    <AudioIcon />
)
`}

If you want to use the AudioIcon at a different size, you would need
to import the 24px version of the icon as follows:

${code`
import AudioIcon from '@findable/icon-file-type/glyph/audio/24';

const MyComponent = () => (
    <AudioIcon />
)
`}

${<PitchSentence />}

${(
  <Example
    packageName="@findable/icon-file-type"
    Component={require('../examples/icon-explorer').default}
    title="Icon Explorer"
    source={require('!!raw-loader!../examples/icon-explorer')}
  />
)}
`;
