@sourcegraph/icons

Sourcegraph's icons

This package contains Sourcegraph's icon set Primaries as React components.

Installation

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

Make sure you have access to @sourcegraph private packages

Usage

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.

.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. Change the gulpfile to modify the generation.

To add new icons:

$ git clone [e-mail]: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.