Socket
Socket
Sign inDemoInstall

@locaop/icon-picker

Package Overview
Dependencies
84
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @locaop/icon-picker

This is an icon picker for react-icons.


Version published
Weekly downloads
25
decreased by-51.92%
Maintainers
1
Install size
83.8 MB
Created
Weekly downloads
 

Readme

Source

@locaop/icon-picker

Overview

DEMO IMG

Icon Picker Demo

@locaop/icon-picker is a strongly typed React Icons picker for font-awesome icons. It contains both a picker component and an icon renderer.

Includes all icons: Font Awesome 5

Mainly includes social icons: Phosphor Icons

I feel like an icon picker is a pretty common requirement so I was surprised to find a lack of sufficient icon pickers in the React Ecosystem. The existing ones I found were not that great. As a result, I decided to roll my own.

Installation

Install via npm

npm i @locaop/icon-picker

or yarn

yarn add @locaop/icon-picker

To use this library, you need to have react, react-dom, and @emotion/react installed in your project.

npm install react react-dom @emotion/react

or yarn

npm install react react-dom @emotion/react

Usage

The IconPicker component is just like any other picker component. The value prop is the icon that is displayed on the picker. When a new icon is selected, the onChange handler is fired.

import * as React from 'react'
import { IconPicker } from '@locaop/icon-picker'

export default () => {
  const [value, setValue] = useState("")
  return (
    <IconPicker value={value} onChange={(v) => setValue(v)} />
  )
}

You can also use the IconPickerItem component to render the icon. This uses react-icons under the hood.

import * as React from 'react'
import { IconPickerItem } from '@locaop/icon-picker'

export default () => (
  <IconPickerItem icon="FaAdobe" size={24} color="#000" />
  )

All valid configurations/props of the package

IconPicker

PropTypeRequiredDescription
valuestringtrueThe current font awesome icon displayed on the picker.
onChange(v: string) => voidtrueA change handler that is executed when a new icon is selected.
hideSearchbooleanfalseIf true, the search input is not displayed. Default is false.
containerStylesStyleTypefalseStyles for the picker container
pickerContainerStylesStyleTypefalseStyles for the picker button

IconPickerItem

PropTypeRequiredDescription
iconstringtrueThe name of the icon to render. Example: "FaAdobe"
sizenumberfalseThe size of the icon. Default: 24
colorstringfalseThe color of the icon. Default: "#3a3a3a"
onClick(v: string) => voidfalseAn onClick handler for the icon.

Contribution Guide

If you are interested in contributing, please submit a PR.

License

This project is licensed under the ISC License. See the LICENSE file for details.

This library is a fork of DATechnologies/react-fa-icon-picker.

Keywords

FAQs

Last updated on 04 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc