npm i -PE @yandex/ui-icons
Simple
import { Search } from '@yandex/ui-icons'
export const App = () => {
return <Search />
}
Set size
Icons has 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>
)
}
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");
}
This project develop under MPL-2.0 license.