@yandex/ui-icons

npm i -PE @yandex/ui-icons

Usage no npm install needed!

<script type="module">
  import yandexUiIcons from 'https://cdn.skypack.dev/@yandex/ui-icons';
</script>

README

@yandex/ui-icons (WIP)

image

npm

Installation

npm i -PE @yandex/ui-icons

Usage (jsx)

Simple

import { Search } from '@yandex/ui-icons'

export const App = () => {
  return <Search />
}

Set size

Now available next sizes: 12, 16, 24, 32 (default 24).

import { Search } from '@yandex/ui-icons'

export const App = () => {
  return <Search size={12} />
}

Get ref

import { useRef } from 'react'
import { Search } from '@yandex/ui-icons'

export const App = () => {
  const iconRef = useRef<SVGSVGElement(null)

  return <Search ref={iconRef} />
}

Set className

By default all icons has base className: SvgIcon.

import { Search } from '@yandex/ui-icons'

export const App = () => {
  return <Search className="MyIcon" />
}

Change color

At now color can be changed with context placement: currentColor.

import { Search } from '@yandex/ui-icons'

export const App = () => {
  return (
    <div style={{ color: 'red' }}>
      <Search />
    </div>
  )
}

Usage (svg)

All icons also available as svg files and can be used inside css or any svg-loaders.

.Icon {
  width: 24px;
  height: 24px;
  background-size: 100%;
  background-image: url("@yandex/ui-icons/Search.svg");
}

License

This project develop under MPL-2.0 license.