React/TypeScript version of seti-icons used in Monaco editor which powers Visual Studio Code.
Install the package from GitHub:
npm i seti-icons-react
Then import required icons from it:
import { TypeScript } from 'seti-icons-react'
class MyComponent extends React.Component {
render() {
return (
<figure>
<figcaption>
Hello, TypeScript!
</figcaption>
<TypeScript theme="extension/.ts"/>
</figure>
)
}
}
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:
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"/>
You can switch between svg
, backgroundImage
and maskImage
render:
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.
Run npm run build
to generate TypeScript source code and transpile it to JavaScript.