import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';

<Meta title="Intro" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# @reuters-graphics/graphics-components

<p>
  <a href="https://www.npmjs.com/package/@reuters-graphics/graphics-components">
    <img
      src="https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg"
      alt="npm version"
      style={{ display: 'inline-block', margin: '0 5px 0 0' }}
    />
  </a>
  <a href="https://github.com/reuters-graphics/graphics-components">
    <img
      src="https://badgen.net/badge/icon/GitHub?icon=github&label"
      alt="GitHub"
      style={{ display: 'inline-block', margin: '0 5px 0 0' }}
    />
  </a>
</p>

Svelte components, SCSS and more you can use in graphics projects.

## Getting started

1. Install

```bash
yarn add @reuters-graphics/graphics-components
```

2. Checkout the [guides](?path=/docs/guides-using-these-docs--page), if you haven't, or dive straight into the docs to start using components.

```svelte
<script>
  import { BodyText } from '@reuters-graphics/graphics-components';
</script>

<BodyText text="{'Hello world!'}" />
```