# @myxplor/icons

> ![screen shot 2018-05-09 at 10 51 44 pm](https://user-images.githubusercontent.com/9635/39811050-94aabf74-53db-11e8-920e-b0ac9c075138.png)

Latest version **0.9.3** (published 2020-09-14) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install @myxplor/icons
pnpm add @myxplor/icons
yarn add @myxplor/icons
bun add @myxplor/icons
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.3 |
| Published | 2020-09-14 |
| First published | 2018-02-16 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 45.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | adam-xplor, hjemmel, mengopudding, moosch, arjun555, waffleau, lex-xplor, wiob, fredwu |

## Links

- npm: https://www.npmjs.com/package/@myxplor/icons
- npm.io page: https://npm.io/package/@myxplor/icons

## Recent versions

- 0.9.3 (latest) — 2020-09-14
- 0.0.3-alpha.6 — 2019-06-19
- 0.0.3-alpha.5 — 2019-06-19
- 0.0.3-alpha.4 — 2019-06-19
- 0.0.3-alpha.3 — 2019-06-19
- 0.0.3-alpha.1 — 2019-06-16
- 0.0.0-alpha.48 — 2019-06-15
- 0.0.0-alpha.42 — 2019-06-11
- 0.0.0-alpha.41 — 2019-06-10
- 0.0.0-alpha.40 — 2019-06-10
- 0.0.0-alpha.39 — 2019-06-10
- 0.0.0-alpha.38 — 2019-06-10
- 0.9.2 — 2018-07-02
- 0.9.1 — 2018-06-12
- 0.9.0 — 2018-06-12
- … 11 more at https://npm.io/package/@myxplor/icons/versions

## README

# Icons

![screen shot 2018-05-09 at 10 51 44 pm](https://user-images.githubusercontent.com/9635/39811050-94aabf74-53db-11e8-920e-b0ac9c075138.png)


All icons are svg's that are rendered by react. This might sounds like we're just trying to be super fancy, but this gives us some advantages.

SVG is inline in the page, which allows us to control the size, colour, stroke (border) thickness via css. 

## Passing props

Given the icons are react components, we can pass props to control which shape we want.

* `title` string, used in the svg title. Each icon has their own default title. Eg: the loading icon has a title of "Loading"
* `large` - boolean, makes the icon larger by 25%. _Default false_
* `left` - boolean. Moves all padding to the righthand side, for when is display left aligned. (eg: in a button)
* `className` - supply your own classname
* `onClick` - function. When supplied will wrap an `<a>` around the icon, so is rendered as a link


For example, the `VisibleIcon` has two states where the "eye" is open and when it is closed.
By default the icon is set to closed. To use the open state pass `open` as a prop. 

```jsx
<VisibleIcon open />
<VisibleIcon />
```

![screen shot 2018-03-02 at 6 19 54 pm](https://user-images.githubusercontent.com/9635/36884506-64635b02-1e46-11e8-8330-4c29710e7392.png)

> Not all icons have states

---
_Source: https://npm.io/package/@myxplor/icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._