# @vx/glyph

Glyphs are small icons that you can use in your graphs. Some elements, like `LinePath`, can take a function that returns a glyph.

For example:

    import { LinePath } from '@vx/shape';
    import { GlyphDot } from '@vx/glyph';

    let line = (
      <LinePath
        ...
        glyph={(d, i) => {
          return (
            <GlyphDot
              className={"glyph-dots"}
              key={'line-dot-{i}'}
              cx={xScale(x(d))}
              cy={yScale(y(d))}
              r={6}
              fill={"white"}
              stroke={"black"}
              strokeWidth={3} />
          )
        }}
      />
    )

You also can incorporate child elements into your glyph to add labels and such.

    import { Dot } from '@vx/glyph';

    <GlyphDot ... >
      <text
        x={xScale(x(d))}
        y={yScale(y(d))}
        dx={10}
        fill={"white"}
        stroke={"black"}
        strokeWidth={6}
        fontSize={11}
      >
        {"Hi there!"}
      </text>
    </GlyphDot>

## Installation

    npm install --save @vx/glyph

## Components

- Glyph
- GlyphCircle
- GlyphCross
- GlyphDiamond
- GlyphDot
- GlyphSquare
- GlyphStar
- GlyphTriangle
- GlyphWye

## API

### <Glyph />

# Glyph.children<any>

# Glyph.className<string>

# Glyph.left<number>

Default | 0

# Glyph.top<number>

Default | 0

### <GlyphCircle />

# GlyphCircle.children<func>

# GlyphCircle.className<string>

# GlyphCircle.left<number>

# GlyphCircle.size<union(number|func)>

# GlyphCircle.top<number>

### <GlyphCross />

# GlyphCross.children<func>

# GlyphCross.className<string>

# GlyphCross.left<number>

# GlyphCross.size<union(number|func)>

# GlyphCross.top<number>

### <GlyphDiamond />

# GlyphDiamond.children<func>

# GlyphDiamond.className<string>

# GlyphDiamond.left<number>

# GlyphDiamond.size<union(number|func)>

# GlyphDiamond.top<number>

### <GlyphDot />

# GlyphDot.children<func>

# GlyphDot.className<string>

# GlyphDot.left<number>

Default | 0

# GlyphDot.top<number>

Default | 0

### <GlyphSquare />

# GlyphSquare.children<func>

# GlyphSquare.className<string>

# GlyphSquare.left<number>

# GlyphSquare.size<union(number|func)>

# GlyphSquare.top<number>

### <GlyphStar />

# GlyphStar.children<func>

# GlyphStar.className<string>

# GlyphStar.left<number>

# GlyphStar.size<union(number|func)>

# GlyphStar.top<number>

### <GlyphTriangle />

# GlyphTriangle.children<func>

# GlyphTriangle.className<string>

# GlyphTriangle.left<number>

# GlyphTriangle.size<union(number|func)>

# GlyphTriangle.top<number>

### <GlyphWye />

# GlyphWye.children<func>

# GlyphWye.className<string>

# GlyphWye.left<number>

# GlyphWye.size<union(number|func)>

# GlyphWye.top<number>