Select Icon - React UI Component for Icon Selection

By : bug7a Published On Sunday, April 28, 2024, 18:05 In JavaScript

Live Preview Screenshots Add To Favorite

Share This Product

Details
Comments

Select Icon is a React component that provides an easy and customizable way to select icons from a collection.

Features:

- JSON data-driven
- Animation support
- Supports both JSX and TypeScript versions

Note:

- This component requires React version 16.8 or higher.

Package Includes:

- Guide.pdf
- /example-files/App.js
- /example-files/assets/*.png
- /example-files/ozden/react-ui-select-icon/SelectIcon.jsx
- /example-files/ozden/react-ui-select-icon/SelectIcon.tsx
- /example-files/ozden/react-ui-select-icon/SelectIcon.css
- /example-files/ozden/react-ui-select-icon/SelectIcon/arrow.svg

Basic Code Example:

import SelectIcon from './ozden/react-ui-select-icon/SelectIcon';

const [icons, setIcons] = useState([
    { id: "1", iconFile: images['./cat1.png'], title:"Tree" },
    { id: "2", iconFile: images['./cat2.png'], title: "" },
    { id: "3", iconFile: images['./cat3.png'], title: "Paris" },
  ]);

function App() {
  const handleSelect = (id) => {
    console.log(`Selected icon id: ${id}`);
  }
  return (
    <SelectIcon 
      icons={icons} 
      selectedId="1" 
      onSelect={handleSelect}
    />
  );
}