jxnblk / Reline
React SVG line icon components
Stars: ✭ 243
Programming Languages
javascript
184084 projects - #8 most used programming language
Reline
React SVG line icon components
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 (default16
) -
strokeWidth
- number indicating the stroke width of the icon in pixels (default3
) -
stroke
- string for the stroke color (defaultcurrentcolor
)
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].