Reline

React SVG line icon components

http://jxnblk.com/reline

npm i reline

import React from 'react'
import { Line } from 'reline'
 
const Demo = () => (
  <div>
    <Line path={[
      [0, 0],
      [16, 16]
    ]} />
  </div>
)

import React from 'react'
import { Icon } from 'reline'
 
const Demo = () => (
  <div>
    <Icon name='chevron' down />
  </div>
)

import React from 'react'
import {
  X,
  Chevron
} from 'reline'
 
const Demo = () => (
  <div>
    <X />
    <Chevron right />
  </div>
)

Components

Line

Creates SVG icons with straight lines

Props

• path - an array of x/y coordinate arrays to create straight lines, based on a 16x16 grid
• paths - an array of path arrays to create segmented lines
• size - number indicating the width and height of the icon in pixels (default 16)
• strokeWidth - number indicating the stroke width of the icon in pixels (default 3)
• stroke - string for the stroke color (default currentcolor)

Icon

Line component for icons based on common shapes

Props

• name - key for icon name, one of the following:
  • x
  • plus
  • minus
  • chevron
  • arrow
  • triangle
  • square
  • diamond
  • burger
• up - sets orientation for directional icons (chevron, arrow, & triangle)
• down - sets orientation for directional icons
• left - sets orientation for directional icons
• right - sets orientation for directional icons

Primitive Components

• X - X-shaped icon
• Plus - plus symbol icon
• Minus - minus symbol icon
• Chevron - chevron-shaped icon
• Arrow - arrow-shaped icon
• Triangle - triangle-shaped icon
• Square - square-shaped icon
• Diamond - diamond-shaped icon
• Burger - hamburger icon

MIT License