# seti-icons-react

> Seti UI icons for react.

Latest version **0.2.0** (published 2021-01-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install seti-icons-react
pnpm add seti-icons-react
yarn add seti-icons-react
bun add seti-icons-react
```

## 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.2.0 |
| Published | 2021-01-01 |
| First published | 2021-01-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^14.15.1 |
| Dependencies | 0 |
| Unpacked size | 1007.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hopeless Programmer |
| Maintainers | hopeless-programmer |
| Keywords | seti-ui, react, typescript |

## Links

- npm: https://www.npmjs.com/package/seti-icons-react
- Repository: https://github.com/hopeless-programmer-online/seti-icons-react
- Homepage: https://github.com/hopeless-programmer-online/seti-icons-react#readme
- Issues: https://github.com/hopeless-programmer-online/seti-icons-react/issues
- npm.io page: https://npm.io/package/seti-icons-react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2021-01-01
- 0.1.1 — 2021-01-01
- 0.1.0 — 2021-01-01

## README

# seti-icons-react

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/hopeless-programmer-online/seti-icons-react/Node.js%20CI)
![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/hopeless-programmer-online/seti-icons-react)
![GitHub](https://img.shields.io/github/license/hopeless-programmer-online/seti-icons-react)

[React](https://github.com/facebook/react)/[TypeScript](https://github.com/microsoft/TypeScript) version of [seti-icons](https://www.npmjs.com/package/seti-icons) used in [Monaco](https://github.com/Microsoft/monaco-editor) editor which powers [Visual Studio Code](https://github.com/Microsoft/vscode).

## Usage

Install the package from GitHub:

```
npm i seti-icons-react
```

Then import required icons from it:

```tsx
import { TypeScript } from 'seti-icons-react'

class MyComponent extends React.Component {
    render() {
        return (
            <figure>
                <figcaption>
                    Hello, TypeScript!
                </figcaption>

                <TypeScript theme="extension/.ts"/>
            </figure>
        )
    }
}
```

## Themes

Most of the icons in Monaco are used for several purposes. For instance, `TypeScript` icon has different colors for `.ts` and `.test.ts` extensions.
You can switch between these themes using `theme` prop:

```tsx
import { TypeScript } from 'seti-icons-react'

// fill = rgb(38 139 210)
<TypeScript theme="extension/.ts"/>
// fill = rgb(181 137 0)
<TypeScript theme="extension/.test.ts"/>
```

## CSS Render

You can switch between `svg`, `backgroundImage` and `maskImage` render:

```tsx
import { TypeScript } from 'seti-icons-react'

// always visible
<TypeScript render="svg"/>
// not showing on disabled styles
<TypeScript render="backgroundImage"/>
// not showing on disabled styles + fill can be changed via backgroundColor
<TypeScript render="maskImage"/>
```

This way You can change the size of the icons via `backgroundSize` prop.

## Development

Run `npm run build` to generate TypeScript source code and transpile it to JavaScript.

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