# Sourcegraph's icons

[![build](https://badge.buildkite.com/058c29e80ac33811645bb0c4b995fccd17b06e25e41a4ef358.svg)](https://buildkite.com/sourcegraph/icons)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

This package contains Sourcegraph's icon set [Primaries](http://www.parakeet.co/primaries/) as React components.

## Installation

```bash
yarn add @sourcegraph/icons
# or
npm install --save @sourcegraph/icons
```

Make sure you have access to `@sourcegraph` private packages

## Usage

```tsx
import * as React from 'react'
import RocketIcon from '@sourcegraph/icons/lib/Rocket'

class SourcegraphSlogan extends React.Component<{}, {}> {
    public render(): JSX.Element {
        return (
            <span className="sourcegraph-slogan">
                <RocketIcon className="sourcegraph-slogan__icon" /> The future sooner
            </span>
        )
    }
}
```

### Styling

You can give the icons a `className` prop.
Icons have the CSS class `icon` and the kebab-case version of the icon name attached.
They have no styling by default, you can freely style them with CSS or apply global styles.

```scss
.sourcegraph-slogan {
    &__icon {
        width: 32rem;
        height: 32rem;
        fill: currentColor; // This makes the SVG match the color of the text
    }
}
```

## Development

The React components are generated with [Gulp](https://gulpjs.com/).
Change the gulpfile to modify the generation.

### To add new icons:

    $ git clone git@github.com:sourcegraph/icons.git

Copy new icons into icons/svg

Install dependencies

    $ npm install

Build

    $ npm run build

git add, commit & push

Publish new version

    $ npm version <patch|minor|major> # please see http://semver.org/
    $ npm publish
    $ git push
    $ git push --tags

Link to local repo
switch to sourcegraph/web

    $ npm install @sourcegraph/icons@latest --save

### To change icons:

Modify the SVGs, then regenerate & publish.