Beincom Icons

Visit beincom-web-ui.vercel.app/?path=/docs/icons to browse the icons.

Documentation

All icons are available as individual React components.

Install Beincom Icons from npm:

npm install @beincom/web-icons

Import the icons into your React project:

import { ScanIcon } from '@beincom/web-icons'

function MyComponent() {
    return (
        <div>
            <ScanIcon />
        </div>
    )
}

If your project grows in size, this option is available.

import ScanIcon from '@beincom/web-icons/dist/icons/ScanIcon'

function MyComponent() {
    return (
        <div>
            <ScanIcon />
        </div>
    )
}

With Dynamic Imports

import React, { lazy, Suspense } from 'react'
import { type IconProps } from '@beincom/web-ui'
import dynamicIconImports from '@beincom/web-ui/dist/dynamicIconImports'

const fallback = <div style={{ background: '#ddd', width: 24, height: 24 }} />

interface IconProps extends Omit<IconProps, 'ref'> {
    name: keyof typeof dynamicIconImports
}

const Icon = ({ name, ...props }: IconProps) => {
    const BeincomIcon = lazy(dynamicIconImports[name])

    return (
        <Suspense fallback={fallback}>
            <BeincomIcon {...props} />
        </Suspense>
    )
}

export default Icon