https://github.com/jxnblk/reline

React SVG line icon components
https://github.com/jxnblk/reline

Last synced: 3 days ago
JSON representation

React SVG line icon components

• Host: GitHub
• URL: https://github.com/jxnblk/reline
• Owner: jxnblk
• Created: 2016-08-23T02:23:21.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-28T15:54:20.000Z (about 8 years ago)
• Last Synced: 2024-05-02T01:13:43.462Z (6 months ago)
• Language: JavaScript
• Homepage: http://jxnblk.com/reline
• Size: 244 KB
• Stars: 247
• Watchers: 5
• Forks: 11
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Reline

React SVG line icon components

http://jxnblk.com/reline

```js

npm i reline

```

```js

import React from 'react'

import { Line } from 'reline'

const Demo = () => (

  


    

  

)

```


```js

import React from 'react'

import { Icon } from 'reline'

const Demo = () => (

  


    

  

)

```


```js

import React from 'react'

import {

  X,

  Chevron

} from 'reline'

const Demo = () => (

  


    

    

  

)

```


## 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