Repository: rendinjast/iconsax-react
Branch: master
Commit: 2c3c07380fe0
Files: 61
Total size: 68.9 KB

Directory structure:
gitextract_4soe0rfr/

├── .gitignore
├── .prettierrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── lerna.json
├── meta-data.json
├── package.json
├── packages/
│   ├── iconsax-react/
│   │   ├── .babelrc
│   │   ├── .npmignore
│   │   ├── README.md
│   │   ├── package.json
│   │   └── rollup.config.js
│   └── iconsax-react-native/
│       ├── .babelrc
│       ├── .npmignore
│       ├── README.md
│       ├── package.json
│       └── rollup.config.js
├── scripts/
│   ├── build.js
│   ├── fetchIcon.js
│   └── generateIcons.js
└── website/
    ├── .eslintrc.json
    ├── .prettierrc
    ├── .vscode/
    │   └── settings.json
    ├── Containers/
    │   └── IconContainer.tsx
    ├── components/
    │   ├── Header.tsx
    │   ├── IconColor.tsx
    │   ├── IconCustomizer.tsx
    │   ├── IconItem.tsx
    │   ├── IconList.tsx
    │   ├── IconSearch.tsx
    │   ├── IconSize.tsx
    │   ├── IconVariant.tsx
    │   ├── RainbowButton.tsx
    │   ├── SelectedIcon.tsx
    │   ├── Selector.tsx
    │   └── index.ts
    ├── hooks/
    │   ├── index.ts
    │   ├── useDebounce.ts
    │   ├── useOnClickOutside.ts
    │   ├── useTimeoutFn.ts
    │   └── useWindowSize.ts
    ├── lib/
    │   └── icons.ts
    ├── next-env.d.ts
    ├── next.config.js
    ├── package.json
    ├── pages/
    │   ├── _app.tsx
    │   ├── _document.tsx
    │   ├── api/
    │   │   └── hello.ts
    │   └── index.tsx
    ├── postcss.config.js
    ├── public/
    │   ├── browserconfig.xml
    │   └── site.webmanifest
    ├── store/
    │   ├── IconContext.tsx
    │   ├── iconReducer.ts
    │   ├── index.ts
    │   ├── searchState.ts
    │   └── selectedStore.ts
    ├── styles/
    │   └── globals.css
    ├── tailwind.config.js
    └── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules

packages/*/dist
packages/*/node_modules
packages/*/src/*




website/node_modules
website/.next
website/out



yarn-error.log*



================================================
FILE: .prettierrc
================================================
{
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 100,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false
}


================================================
FILE: CONTRIBUTING.md
================================================


================================================
FILE: LICENSE
================================================
Copyright (c) ERFAN KHADIVAR

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute,
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial
portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: README.md
================================================
<h1 align="center">iconsax for React and React Native</h1>

<p align="center">
  1000 icons in 6 different styles, total 6000 icons | 
Perfectly balance | 
24px grid-based
<p>

<p align="center">
  <a href="https://iconsax.erfan.ee/"><strong>Browse icons at site</strong></a>
</p>
<br>
<br>

## Installation

### React

```bash
yarn add iconsax-reactjs
# or
npm i iconsax-reactjs
```

### React Native

```bash
yarn add iconsax-react-nativejs react-native-svg
# or
npm i iconsax-react-nativejs react-native-svg
```

## Usage

```jsx
import React from 'react';
//import icon. for React Native import from 'iconsax-react-nativejs'
import { EmojiHappy } from 'iconsax-reactjs';

const Example = () => {
  // then use it as a normal React Component
  return <EmojiHappy />;
};
```

You can configure Icons with inline props:

```jsx
<EmojiHappy color="#eee" variant="Bulk" size={54} />
```

## Props

| Prop      | Type                                                | Default        | Note                   |
| --------- | --------------------------------------------------- | -------------- | ---------------------- |
| `color`   | `string`                                            | `currentColor` | css color              |
| `size`    | `number` `string`                                   | 24px           | size={24} or size="24" |
| `variant` | `Linear` `Outline` `TwoTone` `Bulk` `Broken` `Bold` | `Linear`       | icons styles           |

---

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md)

## License

[MIT](./LICENSE)


================================================
FILE: lerna.json
================================================
{
  "packages": ["packages/*", "website" ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "registry": "https://registry.npmjs.org/"
}


================================================
FILE: meta-data.json
================================================
{"variants":["Bold","Broken","Bulk","Linear","Outline","TwoTone"],"categories":[{"name":"Archive","icons":["ArchiveAdd","ArchiveMinus","ArchiveSlash","ArchiveTick","Archive","BookSaved","BookSquare","ReceiptSquare","Save2","SaveAdd","SaveMinus","SaveRemove"]},{"name":"Arrow","icons":["ArrangeHorizontalCircle","ArrangeHorizontalSquare","ArrangeHorizontal","ArrangeVerticalCircle","ArrangeVerticalSquare","ArrangeVertical","ArrowCircleDown2","ArrowCircleDown","ArrowCircleLeft2","ArrowCircleLeft","ArrowCircleRight2","ArrowCircleRight","ArrowCircleUp2","ArrowCircleUp","ArrowDown2","ArrowDown3","ArrowDown","ArrowForwardSquare","ArrowForward","ArrowLeft2","ArrowLeft3","ArrowLeft","ArrowRight2","ArrowRight3","ArrowRight","ArrowRotateLeft","ArrowRotateRight","ArrowSquareDown","ArrowSquareLeft","ArrowSquareRight","ArrowSquareUp","ArrowSwapHorizontal","ArrowSwapVertical","ArrowUp2","ArrowUp3","ArrowUp","BackSquare","Back","Convert","ExportCircle","ExportCurve","ExportSquare","Export","ImportCircle","ImportCurve","ImportSquare","Import","LoginCurve","Login","LogoutCurve","Logout","ReceiveSquare2","ReceiveSquare","Receive","Refresh2","RefreshCircle","RefreshLeftSquare","RefreshRightSquare","RefreshSquare","Refresh","RepeatCircle","Repeat","TransmitSqaure2","TransmitSquare","Transmit"]},{"name":"Astrology","icons":["Aquarius","Gemini2","Gemini","Man","Sagittarius","Woman"]},{"name":"Building","icons":["Bank","Building3","Building4","Building","Buildings2","Buildings","Buliding","Courthouse","Hospital","House2","House"]},{"name":"Business","icons":["Activity","Chart1","Chart2","Chart21","ChartFail","ChartSuccess","Chart","Diagram","FavoriteChart","Graph","HashtagSquare","Health","HomeHashtag","HomeTrendDown","HomeTrendUp","Personalcard","PresentionChart","StatusUp","TrendDown","TrendUp"]},{"name":"Call","icons":["CallAdd","CallCalling","CallIncoming","CallMinus","CallOutgoing","CallReceived","CallRemove","CallSlash","Call"]},{"name":"Car","icons":["AirplaneSquare","Airplane","Bus","Car","Driving","GasStation","Ship","SmartCar"]},{"name":"Computers, Devices, Electronics","icons":["Airdrop","Airpod","Airpods","Bluetooth2","BluetoothCircle","BluetoothRectangle","Bluetooth","CloudAdd","CloudChange","CloudConnection","CloudRemove","CpuCharge","CpuSetting","Cpu","Devices","Driver2","DriverRefresh","Driver","Electricity","ExternalDrive","FolderConnection","Game","Gameboy","Headphone","Headphones","KeyboardOpen","Keyboard","Microscope","MirroringScreen","Mobile","MonitorMobbile","MonitorRecorder","Monitor","Mouse","MusicPlay","PrinterSlash","Printer","Ram2","Ram","Simcard1","Simcard2","Simcard","Speaker","TableLamp","WatchStatus","Watch","WeightMeter","WristClock"]},{"name":"Content-Edit","icons":["ArchiveBook","Bill","ClipboardClose","ClipboardExport","ClipboardImport","ClipboardText","ClipboardTick","Copyright","CreativeCommons","DocumentCloud","DocumentCopy","DocumentDownload","DocumentFavorite","DocumentFilter","DocumentForward","DocumentLike","DocumentPrevious","DocumentSketch","DocumentText1","DocumentText","DocumentUpload","Document","Edit2","Edit","MenuBoard","Note1","NoteAdd","NoteFavorite","NoteRemove","NoteText","Note","Stickynote","TaskSquare","Task"]},{"name":"Crypto, Company","icons":["Aave","Android","Ankr","Apple","Augur","Autonio","Avalanche","Be","BinanceCoin","BinanceUsd","Bitcoin","Blogger","Bootstrap","Cardano","Celo","Celsius","Chainlink","Civic","Dai","Dash","Decred","Dent","Dribbble","Dropbox","Educare","Emercoin","EnjinCoin","Eos","EthereumClassic","Ethereum","Facebook","Figma1","Figma","Framer","FtxToken","GoogleDrive","GooglePlay","Google","Harmony","HederaHashgraph","Hex","Html3","Html5","HuobiToken","Icon","Illustrator","Iost","JavaScript","Js","KyberNetwork","Litecoin","Maker","Messenger","Monero","Nebulas","Nem","Nexo","OceanProtocol","Okb","Okru","Ontology","Paypal","Photoshop","Polkadot","Polygon","Polyswarm","Python","Quant","Shutterstock","Siacoin","Slack","Snapchat","Solana","Spotify","Stacks","Stellar","Tenx","Tether","TheGraph","Theta","Thorchain","Trello","TriangleLogo","Trontron","Twitch","Ui8","UsdCoin","Velas","Vibe","Wanchain1","Wanchain","Whatsapp","Windows","Wing","Xd","Xiaomi","Xrp","Youtube","Zel","Zoom"]},{"name":"Crypto, Currency","icons":["BitcoinCard","BitcoinConvert","BitcoinRefresh","BuyCrypto","CardCoin","Trade"]},{"name":"Delivery","icons":["I3DCubeScan","I3DRotate","I3DSquare","Box1","BoxAdd","BoxRemove","BoxSearch","BoxTick","BoxTime","Box","Convert3DCube","TruckFast","TruckRemove","TruckTick","TruckTime","Truck"]},{"name":"Design, Tools","icons":["Additem","BackwardItem","Bezier","Blend2","Blend","Blur","Brush2","Brush3","BrushBig","BrushSquare","Brush","BucketCircle","BucketSquare","Bucket","ChemicalGlass","ColorSwatch","Colorfilter","ColorsSquare","Component","CopySuccess","Copy","Designtools","Eraser","ForwardItem","Layer","Lifebuoy","Magicpen","MainComponent","MaskLeft","MaskRight","Mask","OmegaCircle","OmegaSquare","Paintbucket","PathTool2","PathToolSquare","PathTool","PenAdd","PenClose","PenRemove","PenTool2","PenTool","RecoveryConvert","RulerPen","Ruler","Scissor","Shapes1","Shapes","Size"]},{"name":"Emails, Messages","icons":["DeviceMessage","DirectInbox","DirectNormal","DirectNotification","DirectSend","Direct","DirectboxDefault","DirectboxNotif","DirectboxReceive","DirectboxSend","Message2","MessageAdd1","MessageAdd","MessageCircle","MessageEdit","MessageFavorite","MessageMinus","MessageNotif","MessageRemove","MessageSearch","MessageSquare","MessageText1","MessageText","MessageTick","MessageTime","Message","Messages1","Messages2","Messages3","Messages","SmsEdit","SmsNotification","SmsSearch","SmsStar","SmsTracking","Sms"]},{"name":"Essetional","icons":["I3Dcube","AddCircle","AddSquare","Add","ArchiveBox","Autobrightness","BatteryCharging","BatteryDisable","BatteryEmpty1","BatteryEmpty","BatteryFull","Box2","Broom","Bubble","Cake","Cd","ChartCircle","Chrome","CloseCircle","CloseSquare","Coffee","Computing","Crown1","Crown","Cup","Danger","Diamonds","Discover","EmojiHappy","EmojiNormal","EmojiSad","FilterAdd","FilterEdit","FilterRemove","FilterSearch","FilterSquare","FilterTick","Filter","Flag2","Flag","FlashCircle","FlashSlash","Flash","Forbidden2","Forbidden","Ghost","Glass","Grammerly","HamburgerMenu","Happyemoji","Home2","Home3","HomeWifi","Home","InfoCircle","Information","Instagram","Judge","Lamp","Level","Milk","MinusCirlce","MinusSquare","Minus","Mirror","MoreCircle","MoreSquare","MouseCircle","MouseSquare","Pet","Pointer","Rank","Reserve","SafeHome","Send2","Send","Share","Signpost","Slash","Slider","SmartHome","Sort","Sound","Speedometer","Status","Sticker","Story","TagCross","TagRight","TickCircle","TickSquare","Trash","Tree","Triangle","TrushSquare","Verify","Warning2","Weight","WifiSquare","Wifi"]},{"name":"Files","icons":["Folder2","FolderAdd","FolderCloud","FolderCross","FolderFavorite","FolderMinus","FolderOpen","Folder"]},{"name":"Grid","icons":["I3Square","AlignBottom","AlignHorizontally","AlignLeft","AlignRight","AlignTop","AlignVertically","Convertshape2","Convertshape","Crop","Element2","Element3","Element4","ElementEqual","ElementPlus","Element","Fatrows","FormatCircle","FormatSquare","Grid1","Grid2","Grid3","Grid4","Grid5","Grid6","Grid7","Grid8","Grid9","GridEdit","GridEraser","GridLock","Kanban","Maximize1","Maximize2","Maximize3","Maximize4","Maximize","RotateLeft","RotateRight","RowHorizontal","RowVertical","SliderHorizontal1","SliderHorizontal","SliderVertical1","SliderVertical"]},{"name":"Location","icons":["ArrowSquare","Arrow","DirectDown","DirectLeft","DirectRight","DirectUp","GlobalEdit","GlobalRefresh","GlobalSearch","Global","GpsSlash","Gps","LocationAdd","LocationCross","LocationDiscover","LocationMinus","LocationSlash","LocationTick","Location","Map1","Map","PictureFrame","Radar2","Radar","RouteSquare","Routing2","Routing"]},{"name":"Money","icons":["CardAdd","CardEdit","CardPos","CardReceive","CardRemove1","CardRemove","CardSend","CardSlash","CardTick1","CardTick","Card","Cards","ChartSquare","Coin1","Coin","ConvertCard","DiscountCircle","DiscountShape","DollarCircle","DollarSquare","EmptyWalletAdd","EmptyWalletChange","EmptyWalletRemove","EmptyWalletTick","EmptyWalletTime","EmptyWallet","Math","Money2","Money3","Money4","MoneyAdd","MoneyArchive","MoneyChange","MoneyForbidden","MoneyRecive","MoneyRemove","MoneySend","MoneyTick","MoneyTime","Money","Moneys","PercentageCircle","PercentageSquare","Receipt1","Receipt21","Receipt2","ReceiptAdd","ReceiptDiscount","ReceiptDisscount","ReceiptEdit","ReceiptItem","ReceiptMinus","ReceiptSearch","ReceiptText","Receipt","SecurityCard","Strongbox2","Strongbox","TableDocument","Tag2","Tag","Ticket2","TicketDiscount","TicketExpired","TicketStar","Ticket","TransactionMinus","Wallet1","Wallet2","Wallet3","WalletAdd1","WalletAdd","WalletCheck","WalletMinus","WalletMoney","WalletRemove","WalletSearch","Wallet"]},{"name":"Notifications","icons":["LampCharge","LampOn","LampSlash","Notification1","NotificationBing","NotificationCircle","NotificationFavorite","NotificationStatus","Notification"]},{"name":"Programing","icons":["Code1","CodeCircle","Code","CommandSquare","Command","Data2","Data","DocumentCode2","DocumentCode","HashtagDown","HashtagUp","Hashtag","Hierarchy2","Hierarchy3","HierarchySquare2","HierarchySquare3","HierarchySquare","Hierarchy","MessageProgramming","MobileProgramming","ProgrammingArrow","ProgrammingArrows","Scroll","SidebarBottom","SidebarLeft","SidebarRight","SidebarTop"]},{"name":"School, Learning","icons":["Award","Book1","Book","Bookmark2","Bookmark","Briefcase","BrifecaseCross","BrifecaseTick","BrifecaseTimer","Calculator","Clipboard","Gift","Notepad2","Notepad","Teacher"]},{"name":"Search","icons":["SearchFavorite1","SearchFavorite","SearchNormal1","SearchNormal","SearchStatus1","SearchStatus","SearchZoomIn1","SearchZoomIn","SearchZoomOut1","SearchZoomOut"]},{"name":"Security","icons":["Alarm","Brodcast","Check","EyeSlash","Eye","FingerCricle","FingerScan","KeySquare","Key","Lock1","LockCircle","LockSlash","Lock","PasswordCheck","ScanBarcode","Scan","Scanner","Scanning","SecuritySafe","SecurityUser","Security","ShieldCross","ShieldSearch","ShieldSecurity","ShieldSlash","ShieldTick","Shield","Unlock"]},{"name":"Settings","icons":["Candle2","Candle","Category2","Category","Menu","More2","More","Setting2","Setting3","Setting4","Setting5","Setting","Settings","ToggleOffCircle","ToggleOff","ToggleOnCircle","ToggleOn"]},{"name":"Shop","icons":["Bag2","BagCross1","BagCross","BagHappy","BagTick2","BagTick","BagTimer","Bag","Barcode","ShopAdd","ShopRemove","Shop","ShoppingBag","ShoppingCart"]},{"name":"Support, Like, Question","icons":["I24Support","Dislike","HeartAdd","HeartCircle","HeartEdit","HeartRemove","HeartSearch","HeartSlash","HeartTick","Heart","Like1","LikeDislike","LikeShapes","LikeTag","Like","Lovely","MagicStar","MedalStar","Medal","MessageQuestion","Ranking","Smileys","Star1","StarSlash","Star","Unlimited"]},{"name":"Time","icons":["Calendar1","Calendar2","CalendarAdd","CalendarCircle","CalendarEdit","CalendarRemove","CalendarSearch","CalendarTick","Calendar","Clock","SecurityTime","Timer1","TimerPause","TimerStart","Timer"]},{"name":"Type, Paragraph, Character","icons":["AttachCircle","AttachSquare","EraserSquare","Firstline","LanguageCircle","LanguageSquare","LayoutMaximize","Link1","Link2","Link21","LinkCircle","LinkSquare","Link","Paperclip2","Paperclip","Pharagraphspacing","QuoteDownCircle","QuoteDownSquare","QuoteDown","QuoteUpCircle","QuoteUpSquare","QuoteUp","Smallcaps","TextBlock","TextBold","TextItalic","TextUnderline","Text","TextalignCenter","TextalignJustifycenter","TextalignJustifyleft","TextalignJustifyright","TextalignLeft","TextalignRight","Translate"]},{"name":"Users","icons":["People","Profile2User","ProfileAdd","ProfileCircle","ProfileDelete","ProfileRemove","ProfileTick","Profile","TagUser","UserAdd","UserCirlceAdd","UserEdit","UserMinus","UserOctagon","UserRemove","UserSearch","UserSquare","UserTag","UserTick","User"]},{"name":"Video, Audio, Image","icons":["AudioSquare","Backward10Seconds","Backward15Seconds","Backward5Seconds","Backward","CameraSlash","Camera","Cut","Forward10Seconds","Forward15Seconds","Forward5Seconds","Forward","GalleryAdd","GalleryEdit","GalleryExport","GalleryFavorite","GalleryImport","GalleryRemove","GallerySlash","GalleryTick","Gallery","Image","MaximizeCircle","Microphone2","MicrophoneSlash1","MicrophoneSlash","Microphone","MiniMusicSqaure","MusicCircle","MusicDashboard","MusicFilter","MusicLibrary2","MusicPlaylist","MusicSquareAdd","MusicSquareRemove","MusicSquareSearch","MusicSquare","Music","Musicnote","Next","NoteSquare","PauseCircle","Pause","PlayAdd","PlayCircle","PlayCricle","PlayRemove","Play","Previous","Radio","RecordCircle","Record","RepeateMusic","RepeateOne","Screenmirroring","Shuffle","StopCircle","Stop","Subtitle","VideoAdd","VideoCircle","VideoHorizontal","VideoOctagon","VideoPlay","VideoRemove","VideoSlash","VideoSquare","VideoTick","VideoTime","VideoVertical","Video","VoiceCricle","VoiceSquare","VolumeCross","VolumeHigh","VolumeLow1","VolumeLow","VolumeMute","VolumeSlash","VolumeUp","Volume"]},{"name":"Weather","icons":["CloudCross","CloudDrizzle","CloudFog","CloudLightning","CloudMinus","CloudNotif","CloudPlus","CloudSnow","CloudSunny","Cloud","Drop","Flashy","Moon","Sun1","SunFog","Sun","Wind2","Wind"]}]}

================================================
FILE: package.json
================================================
{
  "name": "iconsax",
  "description": "iconsax for react and react native",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*",
      "website"
    ]
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rendinjast/iconsax-react.git"
  },
  "version": "0.0.8",
  "scripts": {
    "gen": "node ./scripts/build.js",
    "bootstrap": "lerna bootstrap",
    "build": "lerna run build --ignore website",
    "website": "yarn workspace website",
    "website:dev": "yarn website dev",
    "website:build": "yarn website build",
    "website:start": "yarn website start"
  },
  "devDependencies": {
    "camelcase": "^6.2.0",
    "cheerio": "^1.0.0-rc.10",
    "lerna": "^4.0.0",
    "prettier-eslint": "^13.0.0"
  }
}


================================================
FILE: packages/iconsax-react/.babelrc
================================================
{
  "presets": [["@babel/env", { "modules": false }], "@babel/react"],
  "plugins": ["@babel/proposal-object-rest-spread"]
}


================================================
FILE: packages/iconsax-react/.npmignore
================================================
src


================================================
FILE: packages/iconsax-react/README.md
================================================
<h1 align="center">iconsax for React</h1>

<a href="https://www.npmjs.com/package/iconsax-react-nativejs">for React Native</a>

<p align="center">
  1000 icons in 6 different styles, total 6000 icons | 
Perfectly balance | 
24px grid-based
<p>

<p align="center">
  <a href="https://iconsax.erfan.ee/"><strong>Browse icons at site</strong></a>
</p>
<br>
<br>

## Installation

```bash
yarn add iconsax-reactjs
# or
npm i iconsax-reactjs
```

## Usage

```jsx
import React from 'react';
//import icon.
import { EmojiHappy } from 'iconsax-reactjs';

const Example = () => {
  // then use it as a normal React Component
  return <EmojiHappy />;
};
```

You can configure Icons with inline props:

```jsx
<EmojiHappy color="#eee" variant="Bulk" size={54} />
```

## Props

| Prop      | Type                                                | Default        | Note                   |
| --------- | --------------------------------------------------- | -------------- | ---------------------- |
| `color`   | `string`                                            | `currentColor` | css color              |
| `size`    | `number` `string`                                   | 24px           | size={24} or size="24" |
| `variant` | `Linear` `Outline` `TwoTone` `Bulk` `Broken` `Bold` | `Linear`       | icons styles           |

---

## Contributing

See
<a href="https://github.com/rendinjast/iconsax-react/blob/main/CONTRIBUTING.md">CONTRIBUTING.md</a>

## License

<a href="https://github.com/rendinjast/iconsax-react/blob/main/LICENSE">MIT</a>


================================================
FILE: packages/iconsax-react/package.json
================================================
{
  "name": "iconsax-reactjs",
  "version": "0.0.8",
  "description": "Iconsax icon pack for React",
  "author": "Erfan Khadivar <rendinjast@gmail.com>",
  "homepage": "https://iconsax.erfan.ee",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rendinjast/iconsax-react.git",
    "directory": "packages/iconsax-react"
  },
  "bugs": {
    "url": "https://github.com/rendinjast/iconsax-react/issues"
  },
  "publishConfig": {
    "access": "public"
  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "sideEffects": false,
  "scripts": {
    "preBuild": "rm -rf dist",
    "build:bundle": "rollup --config rollup.config.js",
    "build": "yarn preBuild && yarn build:bundle"
  },
  "keywords": [
    "icons",
    "react",
    "icon components",
    "iconsax"
  ],
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@babel/cli": "^7.15.7",
    "@babel/core": "^7.15.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^20.0.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@types/react": "^17.0.22",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "react": "^17.0.2",
    "rollup": "^2.56.3",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-filesize": "^9.1.1",
    "rollup-plugin-multi-input": "^1.3.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-uglify": "^6.0.4"
  },
  "peerDependencies": {
    "react": "*"
  }
}


================================================
FILE: packages/iconsax-react/rollup.config.js
================================================
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import copy from 'rollup-plugin-copy';
import external from 'rollup-plugin-peer-deps-external';
import multiInput from 'rollup-plugin-multi-input';

const input = ['src/**/*.js'];
const output = [
  {
    dir: 'dist/cjs',
    format: 'cjs',
    exports: 'auto',
    sourcemap: false,
  },
  {
    dir: 'dist/esm',
    format: 'es',
    exports: 'auto',
    sourcemap: false,
  },
];

const plugins = [];
plugins.push(
  babel({
    exclude: 'node_modules/**',
  }),
);
plugins.push(multiInput());
plugins.push(external());
plugins.push(resolve());
plugins.push(commonjs());
plugins.push(
  copy({
    targets: [
      { src: 'src/index.d.ts', dest: 'dist' },
      { src: '../../meta-data.json', dest: 'dist' },
    ],
  }),
);
export default {
  input,
  output,
  external: ['react', 'prop-types'],
  plugins,
};


================================================
FILE: packages/iconsax-react-native/.babelrc
================================================
{
  "presets": [["@babel/env", { "modules": false }], "@babel/react"],
  "plugins": ["@babel/proposal-object-rest-spread"]
}


================================================
FILE: packages/iconsax-react-native/.npmignore
================================================
src


================================================
FILE: packages/iconsax-react-native/README.md
================================================
<h1 align="center">iconsax for React Native</h1>

<a href="https://www.npmjs.com/package/iconsax-reactjs">for React</a>

<p align="center">
  1000 icons in 6 different styles, total 6000 icons | 
Perfectly balance | 
24px grid-based
<p>

<p align="center">
  <a href="https://iconsax.erfan.ee/"><strong>Browse icons at site</strong></a>
</p>

<br>
<br>

## Installation

```bash
yarn add iconsax-react-nativejs react-native-svg
# or
npm i iconsax-react-nativejs react-native-svg
```

## Usage

```jsx
import React from 'react';
//import icon.
import { EmojiHappy } from 'iconsax-react-nativejs';

const Example = () => {
  // then use it as a normal React Component
  return <EmojiHappy />;
};
```

You can configure Icons with inline props:

```jsx
<EmojiHappy color="#eee" variant="Bulk" size={54} />
```

## Props

| Prop      | Type                                                | Default        | Note                   |
| --------- | --------------------------------------------------- | -------------- | ---------------------- |
| `color`   | `string`                                            | `currentColor` | css color              |
| `size`    | `number` `string`                                   | 24px           | size={24} or size="24" |
| `variant` | `Linear` `Outline` `TwoTone` `Bulk` `Broken` `Bold` | `Linear`       | icons styles           |

---

## Contributing

See
<a href="https://github.com/rendinjast/iconsax-react/blob/main/CONTRIBUTING.md">CONTRIBUTING.md</a>

## License

<a href="https://github.com/rendinjast/iconsax-react/blob/main/LICENSE">MIT</a>


================================================
FILE: packages/iconsax-react-native/package.json
================================================
{
  "name": "iconsax-react-nativejs",
  "version": "0.0.8",
  "author": "Erfan Khadivar <rendinjast@gmail.com>",
  "homepage": "https://iconsax.erfan.ee/",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rendinjast/iconsax-react.git",
    "directory": "packages/iconsax-react-native"
  },
  "bugs": {
    "url": "https://github.com/rendinjast/iconsax-react/issues"
  },
  "publishConfig": {
    "access": "public"
  },
  "license": "MIT",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "sideEffects": false,
  "scripts": {
    "gen": "node ./scripts/build.js",
    "preBuild": "rm -rf dist",
    "build:bundle": "rollup --config rollup.config.js",
    "build": "yarn preBuild && yarn build:bundle"
  },
  "keywords": [
    "icons",
    "react-native",
    "icon components",
    "iconsax"
  ],
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@babel/cli": "^7.15.7",
    "@babel/core": "^7.15.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^20.0.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@types/react": "^17.0.22",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.25.3",
    "react": "^17.0.2",
    "react-native-svg": "^12.1.1",
    "rollup": "^2.56.3",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-filesize": "^9.1.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-uglify": "^6.0.4"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": ">=0.46",
    "react-native-svg": ">=5.3"
  }
}


================================================
FILE: packages/iconsax-react-native/rollup.config.js
================================================
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import copy from 'rollup-plugin-copy';
import external from 'rollup-plugin-peer-deps-external';
import multiInput from 'rollup-plugin-multi-input';

const input = ['src/**/*.js'];
const output = [
  {
    dir: 'dist/cjs',
    format: 'cjs',
    exports: 'auto',
    sourcemap: false,
  },
  {
    dir: 'dist/esm',
    format: 'es',
    exports: 'auto',
    sourcemap: false,
  },
];

const plugins = [];
plugins.push(
  babel({
    exclude: 'node_modules/**',
  }),
);
plugins.push(multiInput());
plugins.push(external());
plugins.push(resolve());
plugins.push(commonjs());
plugins.push(
  copy({
    targets: [
      { src: 'src/index.d.ts', dest: 'dist' },
      { src: '../../meta-data.json', dest: 'dist' },
    ],
  }),
);
export default {
  input,
  output,
  external: ['react', 'prop-types'],
  plugins,
};


================================================
FILE: scripts/build.js
================================================
const cc = require('camelcase');
const path = require('path');
const fs = require('fs').promises;
const existsSync = require('fs').existsSync;
const fetchIcon = require('./fetchIcon');
const generateIcons = require('./generateIcons');

// Paths
const rootDir = path.resolve();
const IconsDir = path.join(rootDir, 'icons');
const packagesDir = path.join(rootDir, 'packages');
const packages = ['react', 'react-native'];

const space = () => console.log('-----------------------------');
const main = async () => {
  try {
    // 1. fetching icon form svg files
    space();
    console.log('1. fetching icon files');
    const icons = await fetchIcon(IconsDir);
    console.log(icons);

    space();
    packages.forEach(async (p) => {
      const srPath = path.join(packagesDir, `iconsax-${p}`, 'src');

      // 2. generating meta-data file
      console.log(`----- generating meta-data file -> ${p}`);
      const categories = icons.categories.map((cat) => {
        const icons = cat.icons.map((i) => {
          if (i.match(/^\d/)) {
            i = 'I' + i;
          }
          return cc(i.replace('.svg', ''), { pascalCase: true });
        });
        return { ...cat, icons };
      });
      await fs.writeFile(
        path.join(rootDir, 'meta-data.json'),
        JSON.stringify({ variants: icons.variants, categories }),
      );

      // 3. cleaning old icons
      console.log(`----- cleaning old icons -> ${p}`);

      // const isDirectory = stat.isDirectory();
      const exist = existsSync(srPath);
      if (exist) {
        await fs.rm(srPath, {
          recursive: true,
          force: true,
        });
      }
      await fs.mkdir(srPath);

      // 4. generating icons
      // await generateIcons['react-native'](icons);
      await generateIcons[p](icons);
    });
  } catch (err) {
    throw new Error(err.message);
  }
};
main();


================================================
FILE: scripts/fetchIcon.js
================================================
const path = require('path');
const fs = require('fs');

const { readdirSync } = fs;

const rootDir = path.resolve();

const IconsDir = path.join(rootDir, 'icons');
// does not matter witch variant(Linear, Outline, TwoTone,...) folder
// cause all of them have similar icon name
const categoriesDir = path.join(IconsDir, 'Linear');

const fetchIcon = async () => {
  const variants = readdirSync(IconsDir);

  const _categories = readdirSync(categoriesDir);
  const categories = _categories.map((x) => {
    const icons = readdirSync(path.join(categoriesDir, x));
    return { name: x, icons };
  });
  return { variants, categories };
};

module.exports = fetchIcon;


================================================
FILE: scripts/generateIcons.js
================================================
/* eslint-disable no-unreachable */
/* eslint-disable no-param-reassign */
/* eslint-disable indent */
/* eslint-disable max-len */
const path = require('path');
const fs = require('fs').promises;
const { readFileSync } = require('fs');
const cheerio = require('cheerio');
const prettier = require('prettier-eslint');
const cc = require('camelcase');
const { log } = require('console');

// Paths
const rootDir = path.resolve();
const IconsDir = path.join(rootDir, 'icons');
const packageDir = path.join(rootDir, 'packages');

// format files before write
const format = (text) =>
  // eslint-disable-next-line implicit-arrow-linebreak
  prettier({
    text,
    eslintConfig: {
      extends: 'airbnb',
    },
    prettierOptions: {
      bracketSpacing: true,
      singleQuote: true,
      parser: 'flow',
    },
  });

const convertAttrsToReactAttrs = (obj) => {
  const keyValues = Object.keys(obj).map((key) => {
    const newKey = cc(key);
    let newValue = obj[key];
    if (newValue.match(/^(#292D32|#17191C|#000)$/)) newValue = '%%{color}%%';
    if (newKey.match(/^(width|height)$/) && newValue.match('24')) newValue = '%%{size}%%';

    return { [newKey]: newValue };
  });
  return Object.assign({}, ...keyValues);
};
const reactiveChildren = (children, isNative) => {
  if (!children.length > 0) return;
  const newChidlren = children.map((c) => {
    if (isNative && c.name) c.name = c.name[0].toUpperCase() + c.name.slice(1);
    if (!c.attribs) return c;
    const attribs = convertAttrsToReactAttrs(c.attribs);
    return { ...c, attribs };
  });

  return newChidlren;
};
const convertElementInsideSvgToReactElement = (svgFile, isNative) => {
  const $ = cheerio.load(svgFile);
  const elem = $('svg > *');
  elem.each((_, element) => {
    if (isNative) element.name = element.name[0].toUpperCase() + element.name.slice(1);
    const attrs = convertAttrsToReactAttrs(element.attribs);
    element.attribs = attrs;
    const newc = reactiveChildren(element.children, isNative);
    if (newc) element.children = newc;
  });
  const final = elem.toString().replace(/"?%%"?/g, '');
  return final;
};

const loopAllVariant = (iconsAllVariant, isNative) => {
  const loop = iconsAllVariant.map((iav) => {
    return `const ${iav.variant} = ({color}) => (<>${convertElementInsideSvgToReactElement(
      iav.svgFile,
      isNative,
    )}</>)`;
  });
  return loop.join('\n\n');
};

const switchStatementForVariants = (iconsAllVariant) => {
  const cases = iconsAllVariant.map(
    (iav) => `
  case '${iav.variant}':
    return <${iav.variant} color={color} />
    `,
  );
  return `const chooseVariant = (variant, color) => {
    switch (variant) {
      ${cases.join('')}
        default:
        return <Linear color={color} />
    }
  };`;
};

const initialTypeDefinitions = `/// <reference types="react" />
import { FC, SVGAttributes, Ref } from 'react';
export interface IconProps extends SVGAttributes<SVGElement> {
  variant?: 'Linear' | 'Outline' | 'Broken' | 'Bold' | 'Bulk' | 'TwoTone';
  ref?: Ref<SVGSVGElement>;
  color?: string;
  size?: string | number;
}
export type Icon = FC<IconProps>;
`;

const react = async (icons) => {
  console.log('----- generating icons -> react');
  const builtSourceDir = path.join(packageDir, 'iconsax-react', 'src');
  await fs.writeFile(path.join(builtSourceDir, 'index.js'), '', 'utf-8');
  await fs.writeFile(
    path.join(builtSourceDir, 'index.d.ts'),
    format(initialTypeDefinitions),
    'utf-8',
  );

  icons.categories.forEach(async (category) => {
    category.icons.forEach(async (icon) => {
      const iconsAllVariant = icons.variants.map((variant) => {
        const svgFile = readFileSync(path.join(IconsDir, variant, category.name, icon));
        return { variant, svgFile };
      });

      let ComponentName = cc(icon.replace('.svg', ''), { pascalCase: true });

      if (ComponentName.match(/^\d/)) {
        ComponentName = 'I' + ComponentName;
      }
      const element = `
       import React, {forwardRef} from 'react';

       ${loopAllVariant(iconsAllVariant)}

       ${switchStatementForVariants(iconsAllVariant)}

       const ${ComponentName} =
       forwardRef(({ variant = 'Linear', color = 'currentColor', size = '24', ...rest }, ref) => {
          return (
              <svg {...rest} xmlns="http://www.w3.org/2000/svg" ref={ref} width={size} height={size} viewBox="0 0 24 24" fill="none">
              {chooseVariant(variant, color)}
              </svg>)
       });

       ${ComponentName}.displayName = '${ComponentName}'

       export default ${ComponentName}
       `;

      await fs.writeFile(
        path.join(builtSourceDir, `${ComponentName}.js`),
        format(element),
        'utf-8',
      );

      // add export component to index.js
      const exportString = `export { default as ${ComponentName} } from './${ComponentName}.js';\r\n`;
      await fs.appendFile(path.join(builtSourceDir, 'index.js'), exportString, 'utf-8');

      // add type definition for component in index.d.ts
      const exportTypeString = `export const ${ComponentName}: Icon;\n`;
      await fs.appendFile(path.join(builtSourceDir, 'index.d.ts'), exportTypeString, 'utf-8');
    });
  });
};
const nativeInitialTypeDefinitions = `/// <reference types="react" />
import { FC, Component, Ref } from 'react';
import { SvgProps } from 'react-native-svg';

export interface IconProps extends SvgProps {
  variant?: 'Linear' | 'Outline' | 'Broken' | 'Bold' | 'Bulk' | 'TwoTone';
  ref?: Ref<Component<SvgProps>>;
  color?: string;
  size?: string | number;
}
export type Icon = FC<IconProps>;
`;
const reactNative = async (icons) => {
  console.log('----- generating icons -> react native');
  const builtSourceDir = path.join(packageDir, 'iconsax-react-native', 'src');
  await fs.writeFile(path.join(builtSourceDir, 'index.js'), '', 'utf-8');
  await fs.writeFile(
    path.join(builtSourceDir, 'index.d.ts'),
    format(nativeInitialTypeDefinitions),
    'utf-8',
  );
  icons.categories.forEach(async (category) => {
    category.icons.forEach(async (icon) => {
      const iconsAllVariant = icons.variants.map((variant) => {
        const svgFile = readFileSync(path.join(IconsDir, variant, category.name, icon));
        return { variant, svgFile };
      });

      let ComponentName = cc(icon.replace('.svg', ''), { pascalCase: true });

      if (ComponentName.match(/^\d/)) {
        ComponentName = 'I' + ComponentName;
      }
      const element = `
         import React, {forwardRef} from 'react';
         import Svg, {  Path, G } from 'react-native-svg';

         ${loopAllVariant(iconsAllVariant, true)}

         ${switchStatementForVariants(iconsAllVariant)}

         const ${ComponentName} =
         forwardRef(({ variant = 'Linear', color = 'currentColor', size = '24', ...rest }, ref) => {
            return (
                <Svg {...rest} xmlns="http://www.w3.org/2000/svg" ref={ref} width={size} height={size} viewBox="0 0 24 24" fill="none">
                {chooseVariant(variant, color)}
                </Svg>)
         });

         ${ComponentName}.displayName = '${ComponentName}'
         export default ${ComponentName}
         `;

      await fs.writeFile(
        path.join(builtSourceDir, `${ComponentName}.js`),
        format(element),
        'utf-8',
      );

      // add export component to index.js
      const exportString = `export { default as ${ComponentName} } from './${ComponentName}.js';\r\n`;
      await fs.appendFile(path.join(builtSourceDir, 'index.js'), exportString, 'utf-8');

      // add type definition for component in index.d.ts
      const exportTypeString = `export const ${ComponentName}: Icon;\n`;
      await fs.appendFile(path.join(builtSourceDir, 'index.d.ts'), exportTypeString, 'utf-8');
    });
  });
};
const generateIcons = {
  react,
  'react-native': reactNative,
};

module.exports = generateIcons;


================================================
FILE: website/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: website/.prettierrc
================================================
{
  "singleQuote": true,
  "semi": false
}


================================================
FILE: website/.vscode/settings.json
================================================
{
  "cSpell.words": ["Customizer"]
}


================================================
FILE: website/Containers/IconContainer.tsx
================================================
import { IconCustomizer, IconList, SelectedIcon } from '../components'
import { IconContext } from '../store'

export const IconContainer = () => {
  return (
    <div className="relative mt-40 font-light">
      <IconContext>
        <IconCustomizer />
        <IconList />
        <SelectedIcon />
      </IconContext>
    </div>
  )
}


================================================
FILE: website/components/Header.tsx
================================================
import React from 'react'
import { Heart } from 'iconsax-reactjs'
import { RainbowButton } from '.'

export const Header = () => {
  return (
    <div className="py-8 container m-auto">
      <div className="top-header text-xs text-gray-400 md:text-gray-300  flex flex-col md:flex-row gap-2 justify-center items-center md:justify-around">
        <span className="">
          ©️ iconsax
          <a
            className="mx-1 border-b border-primary"
            target="_blank"
            rel="noreferrer"
            href="https://iconsax.io/"
          >
            official website
          </a>
          <a
            className="mx-1 border-b border-primary"
            target="_blank"
            rel="noreferrer"
            href="https://github.com/lusaxweb/iconsax"
          >
            github page
          </a>
        </span>
        <span className="flex items-center justify-center ">
          Website Designed and built with
          <Heart variant="Bold" size={16} color="red" className="mx-1" /> by
          <a
            className="mx-1 border-b border-primary"
            target="_blank"
            rel="noreferrer"
            href="https://github.com/rendinjast"
          >
            Erfan Khadivar
          </a>
        </span>
      </div>
      <div className="flex flex-col items-center my-36">
        <h1 className="text-4xl text-center md:text-6xl font-bold flex-row break-words">
          ICONSAX for React and React Native
        </h1>

        <div className="flex-auto flex space-x-3 text-xs md:text-sm h-11 mt-7">
          {/* <button className="px-6 text-white transition-colors duration-150 bg-bg h-full rounded-full text-sm font-normal focus:shadow-outline border-2 border-border">
            iconsax-reactjs npm
          </button> */}
          <RainbowButton>Get Started ✌️</RainbowButton>
          <div className="text-white flex justify-center items-center transition-colors duration-150 bg-bg h-full rounded-full text-sm font-normal focus:shadow-outline border-2 border-border">
            <a
              target="_blank"
              rel="noreferrer"
              href="https://www.npmjs.com/package/iconsax-reactjs"
              className="border-r-2 h-full border-border px-4  flex items-center justify-center"
            >
              React
            </a>
            <a
              target="_blank"
              rel="noreferrer"
              href="https://www.npmjs.com/package/iconsax-react-nativejs"
              className="h-full flex items-center justify-center px-4"
            >
              React Native
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}


================================================
FILE: website/components/IconColor.tsx
================================================
import { useRef, useState } from 'react'
import { BlockPicker, ColorChangeHandler } from 'react-color'
import { useIconContext } from '../store'
import { useOnClickOutside } from '../hooks'

export const IconColor = () => {
  const { state, dispatch } = useIconContext()
  const [isOpen, setIsOpen] = useState(false)
  const colorRef = useRef(null)

  useOnClickOutside(colorRef, () => setIsOpen(false))

  const handleChangeCOmplete: ColorChangeHandler = (color) => {
    dispatch({
      type: 'CHANGE_COLOR',
      payload: color.hex,
    })
  }
  return (
    <div className="relative">
      <div
        onClick={() => setIsOpen((prv) => !prv)}
        style={{
          backgroundColor: state.color,
          textShadow: '1px 1px 4px black',
        }}
        className="h-10 grid place-items-center px-4 rounded-xl cursor-pointer"
      >
        <span className="hidden w-16 text-center sm:block">{state.color}</span>
      </div>
      {isOpen && (
        <div ref={colorRef} className="absolute top-0 right-0">
          <BlockPicker
            className="shadow-2xl"
            color={state.color}
            onChangeComplete={handleChangeCOmplete}
            triangle="hide"
          />
        </div>
      )}
    </div>
  )
}


================================================
FILE: website/components/IconCustomizer.tsx
================================================
import { IconColor, IconSearch, IconSize, IconVariant } from '.'

export const IconCustomizer = () => {
  return (
    <div className="toolbar w-full text-xs md:text-sm font-light flex flex-col justify-center items-center md:justify-end z-10">
      <div className="w-full md:container bg-bg m-auto p-2 sm:p-4 flex gap-2  sm:gap-6 justify-center items-center">
        <IconSearch />
        <IconSize />
        <IconVariant />
        <IconColor />
      </div>
      <div className="w-full h-6 bg-gradient-to-b from-bg to-transparent"></div>
    </div>
  )
}


================================================
FILE: website/components/IconItem.tsx
================================================
import { useRef } from 'react'
import gsap from 'gsap'
import { Icon } from 'iconsax-reactjs'
import { useIconContext, selectedStore } from '../store'

// eslint-disable-next-line react/display-name
const IC = ({ Icon }: { Icon: Icon }) => {
  const {
    state: { color, size, variant },
  } = useIconContext()
  return (
    <span>
      <Icon
        className="transition-all duration-300"
        color={color}
        size={size}
        variant={variant}
      />
    </span>
  )
}

const duration = 0.3
export const IconItem = ({ Icon, name }: { Icon: Icon; name: string }) => {
  const showIcon = selectedStore((state) => state.showIcon)
  const ref = useRef(null)

  const animateEnter = () => {
    gsap
      .to(ref.current, {
        translateY: '-2px',
        borderColor: '#FF8A65',
        duration,
      })
      .play()
  }
  const animateLeave = () => {
    gsap
      .to(ref.current, { translateY: '2px', borderColor: '#1d1d1d', duration })
      .play()
  }

  const handleClick = () => {
    showIcon({ name, Icon })
  }

  return (
    <span
      ref={ref}
      onMouseEnter={animateEnter}
      onMouseLeave={animateLeave}
      onClick={handleClick}
      className="icon bg-card rounded-xl border-2 border-border cursor-pointer flex justify-center items-center h-[140px] w-[140px] overflow-hidden"
    >
      <div className="flex flex-col justify-center items-center gap-3">
        <IC Icon={Icon} />
        <span className="text-xs font-light text-gray-500 text-center overflow-hidden overflow-ellipsis w-32">
          {name}
        </span>
      </div>
    </span>
  )
}


================================================
FILE: website/components/IconList.tsx
================================================
import { useEffect, useState } from 'react'
import icons, { IIconsArray } from '../lib/icons'
import { IconItem } from '.'
import { searchStore } from '../store'
import { EmojiSad } from 'iconsax-reactjs'
import { AutoSizer, List, WindowScroller } from 'react-virtualized'

const Empty = () => {
  return (
    <div className="w-full flex gap-4 flex-col justify-start items-center">
      <span>
        <EmojiSad color="#FF8A65" variant="Bulk" size="90" />
      </span>
      <span>Nothing Found</span>
    </div>
  )
}
const ICON_CONTAINER_SIZE = 150

export const IconList = () => {
  const [filtered, setFiltered] = useState<IIconsArray[]>(icons)
  const [numColumns, setNumColumns] = useState(1)

  const query = searchStore((state) => state.query)

  const onResize = ({ width }: { width: number }) => {
    if (width <= 576) {
      setNumColumns(Math.floor(width / ICON_CONTAINER_SIZE))
    } else {
      setNumColumns(Math.floor(width / ICON_CONTAINER_SIZE))
    }
  }
  useEffect(() => {
    console.log(query)
    const f =
      icons.filter((x) =>
        x.name.toLowerCase().includes(query!.toLowerCase())
      ) || []
    setFiltered(f)
  }, [query])
  return (
    <div className="container flex justify-center m-auto min-h-[400px]">
      <div className="w-full relative mb-10">
        {filtered.length > 0 ? (
          <WindowScroller>
            {({ height, isScrolling, onChildScroll, scrollTop }) => (
              <AutoSizer disableHeight onResize={onResize}>
                {({ width }) => (
                  <List
                    tabIndex={-1}
                    autoHeight
                    width={width}
                    height={height}
                    isScrolling={isScrolling}
                    onScroll={onChildScroll}
                    scrollTop={scrollTop}
                    rowCount={Math.ceil(filtered.length / numColumns)}
                    rowHeight={ICON_CONTAINER_SIZE + 10}
                    rowRenderer={({ key, index: rowIndex, style }) => (
                      <div
                        key={key}
                        className="grid place-items-center"
                        style={{
                          ...style,
                          gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
                        }}
                      >
                        {Array.from(
                          { length: numColumns },
                          (_, columnIndex) => {
                            const icon =
                              filtered[rowIndex * numColumns + columnIndex]
                            if (!icon) {
                              return null
                            }
                            return (
                              <IconItem name={icon.name} Icon={icon.Icon} />
                            )
                          }
                        )}
                      </div>
                    )}
                  />
                )}
              </AutoSizer>
            )}
          </WindowScroller>
        ) : (
          <Empty />
        )}
      </div>
    </div>
  )
}


================================================
FILE: website/components/IconSearch.tsx
================================================
import { SearchNormal } from 'iconsax-reactjs'
import React, { useState, useCallback } from 'react'
import { useDebounce } from '../hooks'
import { searchStore } from '../store'

export const IconSearch = () => {
  // const { SetQuery } = useSearchContext()
  const SetQuery = searchStore((state) => state.setQuery)
  const [search, setSearch] = useState('')
  const onChangeInput = useCallback((e) => {
    setSearch(e.target.value)
  }, [])

  useDebounce(() => SetQuery(search), 300, [search])
  return (
    <div className="h-10 bg-card rounded-xl flex items-center px-3">
      <SearchNormal size={18} color="#eee" />
      <input
        className="bg-transparent px-2 py-2 w-24 sm:w-40"
        value={search}
        onChange={onChangeInput}
        placeholder="search icons..."
        type="text"
      />
    </div>
  )
}


================================================
FILE: website/components/IconSize.tsx
================================================
import { ArrowDown2 } from 'iconsax-reactjs'
import { useRef, useState } from 'react'
import { useIconContext } from '../store'
import { Selector } from '.'

const options = [12, 16, 24, 32, 44, 60, 80]

export const IconSize = () => {
  const { state, dispatch } = useIconContext()

  const onChange = (op: number) => {
    dispatch({ type: 'CHANGE_SIZE', payload: op })
  }
  return (
    <Selector
      options={options}
      onChange={onChange}
      label="size"
      value={state.size}
    />
  )
}


================================================
FILE: website/components/IconVariant.tsx
================================================
import { Dispatch, useEffect } from 'react'
import { Selector } from '.'
import { useWindowSize } from '../hooks'
import { useIconContext, Variants } from '../store'
import { IconState, VariantType } from '../store/IconContext'
import { IconAction } from '../store/iconReducer'

interface ListProps {
  state: IconState
  dispatch: Dispatch<IconAction>
}

const MenuList = ({ state, dispatch }: ListProps) => {
  return (
    <>
      <div className="rounded-xl h-10 border-indigo-600 overflow-hidden flex">
        {Variants.map((variant) => (
          <span
            onClick={() =>
              dispatch({ type: 'CHANGE_VARIANT', payload: variant })
            }
            className={`px-1 xs:px-4 cursor-pointer grid place-items-center transition-colors duration-300 ${
              variant === state.variant ? 'bg-primary text-white' : 'bg-card'
            }`}
            key={variant}
          >
            {variant}
          </span>
        ))}
      </div>
    </>
  )
}
const DropDownList = ({ state, dispatch }: ListProps) => {
  const onChange = (variant: VariantType) => {
    dispatch({ type: 'CHANGE_VARIANT', payload: variant })
  }
  return (
    <div>
      <Selector
        label="variant"
        onChange={onChange}
        options={Variants.concat()}
        value={state.variant!}
      />
    </div>
  )
}
export const IconVariant = () => {
  const { width } = useWindowSize()
  useEffect(() => {
    console.log(width)
  }, [width])
  const { state, dispatch } = useIconContext()
  // return <MenuList state={state} dispatch={dispatch} />
  if (width >= 1030) {
    return <MenuList state={state} dispatch={dispatch} />
  } else {
    return <DropDownList state={state} dispatch={dispatch} />
  }
}

export default IconVariant


================================================
FILE: website/components/RainbowButton.tsx
================================================
import { FC } from 'react'

export const RainbowButton: FC = ({ children }) => {
  return (
    <a
      target="_blank"
      rel="noreferrer"
      href="https://github.com/rendinjast/iconsax-react"
      className="relative btn rounded-full overflow-hidden w-28 md:w-36 h-full"
    >
      <span className="w-full h-full rainbow block"></span>
      <div
        className={`child absolute bg-bg  m-0.5 top-0 left-0 right-0 bottom-0 flex justify-center items-center rounded-full font-normal`}
      >
        {children}
      </div>
    </a>
  )
}


================================================
FILE: website/components/SelectedIcon.tsx
================================================
import { ReactElement, useEffect, useRef, useState } from 'react'
import { renderToString } from 'react-dom/server'
import { saveAs } from 'file-saver'
import copy from 'copy-to-clipboard'
import canvg from 'canvg'
import gsap from 'gsap'
import { ClipboardText, CloseCircle, Import } from 'iconsax-reactjs'
import { useOnClickOutside } from '../hooks'
import { selectedStore, useIconContext } from '../store'

const duration = 300
export const SelectedIcon = () => {
  const { state } = useIconContext()
  const hideIcon = selectedStore((state) => state.hideIcon)
  const selected = selectedStore((state) => state.selected)
  const [isOpen, setIsOpen] = useState<boolean>(!!selected || false)
  const ref = useRef(null)
  const iconRef = useRef<SVGSVGElement>(null)

  const Icon = selected?.Icon

  useEffect(() => {
    if (isOpen) {
      gsap.to(ref.current, {
        y: '0',
        ease: 'expo.inOUt',
        duration: duration / 1000,
      })
    }
  }, [isOpen])
  useEffect(() => {
    setIsOpen(!!selected)
  }, [selected])

  useOnClickOutside(ref, (e) => {
    const path = e.composedPath() as HTMLElement[]
    let isAnIcon = false

    for (let p = 0; p < path.length; p++) {
      if (path[p].classList && path[p].classList.contains('icon')) {
        return (isAnIcon = true)
      }
    }
    if (!isAnIcon) handleClose()
  })

  const handleClose = () => {
    if (!hideIcon) return
    gsap.to(ref.current, {
      y: '500',
      ease: 'expo.inOUt',
      duration: duration / 1000,
    })
    setTimeout(() => {
      hideIcon()
    }, duration)
  }
  const iconSaveName = `${selected?.name}-${state.variant}-${state.size}px`

  const iconString =
    Icon &&
    renderToString(
      <Icon size={state.size} color={state.color} variant={state.variant} />
    )

  const handleCopySvg = () => {
    if (!iconString) return

    copy(iconString)
  }
  const handleDownloadSvg = () => {
    if (!iconString) return
    const blob = new Blob([iconString])
    saveAs(blob, `${iconSaveName}.svg`)
  }
  const handleDownloadPng = async () => {
    if (!iconString) return

    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const v = canvg.fromString(ctx, iconString)
    v.render()
    const img = canvas.toDataURL('image/png')
    console.log(img)
    saveAs(img, `${iconSaveName}.png`)
  }
  return (
    <>
      {isOpen && (
        <div
          ref={ref}
          className="fixed bg-bg p-3 h-72 md:w-96 mx-4 left-0 md:left-auto right-0 bottom-0 rounded-t-3xl border-2 translate-y-[500px] border-border"
        >
          <div className="flex justify-between items-center">
            <span className="font-bold text-md">{selected?.name}</span>
            <span className="cursor-pointer" onClick={handleClose}>
              <CloseCircle color="white" />
            </span>
          </div>
          <div className="flex gap-1 mt-3">
            <div className="flex-1 border-dashed border-2 p-4 border-border rounded-lg">
              {Icon && (
                <Icon size={64} color={state.color} variant={state.variant} />
              )}
            </div>
            <div className="flex-[7] flex flex-col gap-1 text-xs">
              <Button handleClick={handleCopySvg} name="copy#svg" />
              <div className="flex-1 grid grid-cols-2 gap-1">
                <Button handleClick={handleDownloadSvg} name="download#svg" />
                <Button handleClick={handleDownloadPng} name="download#png" />
              </div>
            </div>
          </div>
          <Code name={selected?.name!} />
        </div>
      )}
    </>
  )
}

interface ICode {
  name: string
}
const prop = (name: string, value: string | number) => [
  {
    text: ` ${name}`,
    class: 'text-purple-400',
  },
  {
    text: '=',
    class: 'text-gray-200',
  },
  {
    text: `"${value}"`,
    class: 'text-green-400',
  },
]
const Code = ({ name }: ICode) => {
  const code = useRef<ReactElement>(null)
  const { state } = useIconContext()
  const [copied, setCopied] = useState(false)

  const VariantProp =
    state.variant !== 'Linear' ? prop('variant', state.variant!) : []
  const SizeProp = state.size !== 24 ? prop('size', state.size!) : []

  const snip = [
    {
      text: '<',
      class: 'text-blue-300',
    },
    {
      text: `${name}`,
      class: 'text-yellow-400',
    },
    ...SizeProp,
    ...prop('color', state.color!),
    ...VariantProp,
    {
      text: '/>',
      class: 'text-blue-300',
    },
  ]
  const handleClick = () => {
    const res = snip.map((s) => s.text)
    copy(res.join(''))
    setCopied(true)
    setTimeout(() => {
      setCopied(false)
    }, 1000)

    // navigator.clipboard.writeText(res.join(''))
  }
  return (
    <div className="relative bg-card border-2 border-border rounded-lg mt-3 py-3 px-2 text-xs">
      <div
        onClick={() => handleClick()}
        className={`absolute bottom-2 right-2 ${
          copied ? 'bg-[#37d67a]' : 'bg-primary'
        } text-bg font-bold text-xs rounded-lg p-1  cursor-pointer`}
      >
        {copied ? 'copied!' : 'copy'}
      </div>
      <pre className="">
        {snip.map((s, i) => (
          <span className={s.class} key={i}>
            {`${s.text}${s.class.match(/-(green|yellow)-/) ? '\n' : ''}`}
          </span>
        ))}
      </pre>
    </div>
  )
}

interface IButton {
  name: string
  handleClick: () => void
}
const Button = ({ name: _name, handleClick }: IButton) => {
  const { state } = useIconContext()
  const [copied, setCopied] = useState(false)
  const name = _name.split('#')
  const Icon = name[0] === 'download' ? Import : ClipboardText
  const onClickHandler = () => {
    if (name[0] === 'copy') {
      console.log('erfan khadivar hastam ')
      setCopied(true)
      setTimeout(() => {
        setCopied(false)
      }, 1000)
    }

    handleClick()
  }

  return (
    <button
      onClick={onClickHandler}
      className="flex-1 flex items-center justify-center gap-1 border-2 border-border active:border-primary transition-all  rounded-lg"
    >
      <Icon color={copied ? '#37d67a' : '#FF8A65'} variant="Bulk" size="22" />
      <span>{copied ? 'copied!' : name[1]}</span>
    </button>
  )
}


================================================
FILE: website/components/Selector.tsx
================================================
import { ArrowDown2 } from 'iconsax-reactjs'
import { useRef, useState } from 'react'
import { useOnClickOutside, useWindowSize } from '../hooks'
import { VariantType } from '../store/IconContext'

type OptionValue = VariantType | number

type OptionType<T extends OptionValue> = T

interface Props<T extends OptionValue> {
  options: OptionType<T>[]
  label: string
  value: T
  onChange: (value: T) => void
}

export const Selector = <T extends OptionValue>({
  options,
  label,
  value,
  onChange,
}: Props<T>) => {
  const { width } = useWindowSize()
  const [isOpen, setIsOpen] = useState(false)
  const ref = useRef(null)

  useOnClickOutside(ref, () => setIsOpen(false))

  const handleChange = (op: T) => {
    setIsOpen(false)
    onChange(op)
  }
  return (
    <div ref={ref} className="relative">
      <div
        onClick={() => setIsOpen((prv) => !prv)}
        className="h-10 flex gap-4 bg-card justify-center items-center pl-3 pr-2 rounded-xl cursor-pointer"
      >
        <span>{width < 600 ? value : `${label}: ${value}`}</span>
        <ArrowDown2
          className={`transition-transform transform ${
            isOpen ? 'rotate-180' : ''
          }`}
          size={14}
          color="white"
        />
      </div>
      {isOpen && (
        <div className="absolute w-full flex flex-col top-12 z-30 left-2/4 transform -translate-x-1/2  m-auto bg-bg border-2 border-primary rounded-2xl">
          {options.map((op) => (
            <span
              key={op}
              onClick={() => handleChange(op)}
              className="text-center cursor-pointer py-2 px-4"
            >
              {op}
            </span>
          ))}
        </div>
      )}
    </div>
  )
}


================================================
FILE: website/components/index.ts
================================================
export { Header } from './Header'
export { Selector } from './Selector'
export { IconItem } from './IconItem'
export { IconCustomizer } from './IconCustomizer'
export { IconList } from './IconList'
export { RainbowButton } from './RainbowButton'
export { IconColor } from './IconColor'
export { IconVariant } from './IconVariant'
export { IconSize } from './IconSize'
export { IconSearch } from './IconSearch'
export { SelectedIcon } from './SelectedIcon'


================================================
FILE: website/hooks/index.ts
================================================
export { useDebounce } from './useDebounce'
export { useOnClickOutside } from './useOnClickOutside'
export { useWindowSize } from './useWindowSize'


================================================
FILE: website/hooks/useDebounce.ts
================================================
import { DependencyList, useEffect } from 'react';
import useTimeoutFn from './useTimeoutFn';

export type UseDebounceReturn = [() => boolean | null, () => void];

export function useDebounce(
  fn: Function,
  ms: number = 0,
  deps: DependencyList = []
): UseDebounceReturn {
  const [isReady, cancel, reset] = useTimeoutFn(fn, ms);

  useEffect(reset, deps);

  return [isReady, cancel];
}


================================================
FILE: website/hooks/useOnClickOutside.ts
================================================
import { RefObject, useEffect } from 'react'

type AnyEvent = MouseEvent | TouchEvent

export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  handler: (event: AnyEvent) => void
): void {
  useEffect(() => {
    const listener = (event: AnyEvent) => {
      const el = ref?.current

      // Do nothing if clicking ref's element or descendent elements
      if (!el || el.contains(event.target as Node)) {
        return
      }

      handler(event)
    }

    document.addEventListener(`mousedown`, listener)
    document.addEventListener(`touchstart`, listener)

    return () => {
      document.removeEventListener(`mousedown`, listener)
      document.removeEventListener(`touchstart`, listener)
    }

    // Reload only if ref or handler changes
  }, [ref, handler])
}


================================================
FILE: website/hooks/useTimeoutFn.ts
================================================
import { useCallback, useEffect, useRef } from 'react';

export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];

export default function useTimeoutFn(fn: Function, ms: number = 0): UseTimeoutFnReturn {
  const ready = useRef<boolean | null>(false);
  const timeout = useRef<ReturnType<typeof setTimeout>>();
  const callback = useRef(fn);

  const isReady = useCallback(() => ready.current, []);

  const set = useCallback(() => {
    ready.current = false;
    timeout.current && clearTimeout(timeout.current);

    timeout.current = setTimeout(() => {
      ready.current = true;
      callback.current();
    }, ms);
  }, [ms]);

  const clear = useCallback(() => {
    ready.current = null;
    timeout.current && clearTimeout(timeout.current);
  }, []);

  // update ref when function changes
  useEffect(() => {
    callback.current = fn;
  }, [fn]);

  // set on mount, clear on unmount
  useEffect(() => {
    set();

    return clear;
  }, [ms]);

  return [isReady, clear, set];
}


================================================
FILE: website/hooks/useWindowSize.ts
================================================
import { useEffect, useState } from 'react'

interface WindowSize {
  width: number
  height: number
}

export const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: 0,
    height: 0,
  })

  useEffect(() => {
    const handler = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    // Set size at the first client-side load
    handler()

    window.addEventListener('resize', handler)

    // Remove event listener on cleanup
    return () => {
      window.removeEventListener('resize', handler)
    }
  }, [])

  return windowSize
}


================================================
FILE: website/lib/icons.ts
================================================
import * as Icons from 'iconsax-reactjs'
import { Icon } from 'iconsax-reactjs'

type iconType = keyof typeof Icons

export interface IIconsArray {
  name: string
  Icon: Icon
}
const iconsArray: IIconsArray[] = []
for (const [name, Icon] of Object.entries(Icons)) {
  iconsArray.push({ name, Icon })
}

export default iconsArray


================================================
FILE: website/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: website/next.config.js
================================================
/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        and: [/\.(js|ts)x?$/],
      },

      use: ['@svgr/webpack'],
    })
    return config
  },
}


================================================
FILE: website/package.json
================================================
{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "next lint"
  },
  "dependencies": {
    "canvg": "^3.0.9",
    "copy-to-clipboard": "^3.3.1",
    "file-saver": "^2.0.5",
    "gsap": "^3.8.0",
    "iconsax-reactjs": "^0.0.8",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-color": "^2.19.3",
    "react-dom": "17.0.2",
    "react-virtualized": "^9.22.3",
    "zustand": "^3.5.14"
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "@types/file-saver": "^2.0.3",
    "@types/react": "17.0.24",
    "@types/react-color": "^3.0.5",
    "@types/react-dom": "^17.0.9",
    "@types/react-virtualized": "^9.21.14",
    "@types/react-window": "^1.8.5",
    "autoprefixer": "^10.3.5",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "postcss": "^8.3.7",
    "tailwindcss": "^2.2.15",
    "typescript": "4.4.3"
  }
}


================================================
FILE: website/pages/_app.tsx
================================================
import type { AppProps } from 'next/app'
import '../styles/globals.css'
import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default MyApp


================================================
FILE: website/pages/_document.tsx
================================================
import React from 'react'
import { Html, Head, Main, NextScript } from 'next/document'

const _document = () => {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <div id="portal" />
        <NextScript />
      </body>
    </Html>
  )
}

export default _document


================================================
FILE: website/pages/api/hello.ts
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: website/pages/index.tsx
================================================
import type { NextPage } from 'next'
import Head from 'next/head'
import { Header } from '../components'
import { IconContainer } from '../Containers/IconContainer'

const Home: NextPage = () => {
  return (
    <div className="font-sans text-gray-50">
      <Head>
        <title>Iconsax React</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#0F0F0F" />

        <meta
          name="description"
          content="1000 pixel perfect icons in 6 different styles for React and React Native"
        />

        <link
          rel="apple-touch-icon"
          sizes="120x120"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff"></meta>

        <meta property="og:site_name" content="Iconsax React" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Iconsax React" />
        <meta property="og:locale" content="en" />
        <meta
          property="og:url"
          content="https://rendinjast.github.io/iconsax-react"
        />
      </Head>
      <Header />
      <IconContainer />
    </div>
  )
}

export default Home


================================================
FILE: website/postcss.config.js
================================================
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


================================================
FILE: website/public/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>


================================================
FILE: website/public/site.webmanifest
================================================
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}


================================================
FILE: website/store/IconContext.tsx
================================================
import { createContext, useContext, Dispatch, FC, useReducer } from 'react'
import IconReducer, { IconAction } from './iconReducer'

export const Variants = [
  'Linear',
  'Outline',
  'Bold',
  'Bulk',
  'Broken',
  'TwoTone',
] as const

export type VariantType = typeof Variants[number] | undefined

export interface IconState {
  search: string
  size: number
  color: string
  variant: VariantType
}

const initialValue: IconState = {
  search: '',
  size: 32,
  color: '#FF8A65',
  variant: 'Linear',
}
const Context = createContext<{
  state: IconState
  dispatch: Dispatch<IconAction>
}>({
  state: initialValue,
  dispatch: () => undefined,
})
export const useIconContext = () => useContext(Context)

const IconContext: FC = ({ children }) => {
  const [state, dispatch] = useReducer(IconReducer, initialValue)

  return (
    <Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>
  )
}

export default IconContext


================================================
FILE: website/store/iconReducer.ts
================================================
import { IconState, VariantType } from './IconContext'

export type IconAction =
  | { type: 'SEARCH'; payload: string }
  | { type: 'CHANGE_VARIANT'; payload: VariantType }
  | { type: 'CHANGE_SIZE'; payload: number }
  | { type: 'CHANGE_COLOR'; payload: string }

const IconReducer = (state: IconState, action: IconAction) => {
  switch (action.type) {
    case 'SEARCH':
      return { ...state, search: action.payload }
    case 'CHANGE_VARIANT':
      return { ...state, variant: action.payload }
    case 'CHANGE_COLOR':
      return { ...state, color: action.payload }
    case 'CHANGE_SIZE':
      return { ...state, size: action.payload }

    default:
      return state
  }
}

export default IconReducer


================================================
FILE: website/store/index.ts
================================================
export { default as IconContext, useIconContext, Variants } from './IconContext'
export { searchStore } from './searchState'
export { selectedStore } from './selectedStore'


================================================
FILE: website/store/searchState.ts
================================================
import create from 'zustand'

interface Search {
  query: string
  setQuery: (query: string) => void
}

export const searchStore = create<Search>((set) => ({
  query: '',
  setQuery: (query) => set({ query }),
}))


================================================
FILE: website/store/selectedStore.ts
================================================
import { IIconsArray } from '../lib/icons'
import create from 'zustand'

interface SelectedState {
  selected: IIconsArray | null
  showIcon: (Icon: IIconsArray) => void
  hideIcon: () => void
}

export const selectedStore = create<SelectedState>((set) => ({
  selected: null,
  showIcon: (Icon) => set({ selected: Icon }),
  hideIcon: () => set({ selected: null }),
}))


================================================
FILE: website/styles/globals.css
================================================
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

*,
*:active,
*:focus {
  outline: none;
  box-sizing: border-box;
}
html,
body {
  background-color: #0f0f0f;
}
.btn .rainbow {
  /* padding: 2px; */
  filter: blur(6px);
  background: conic-gradient(
    #ff2e4e,
    #d960ff,
    #9264ff,
    #00b3f0,
    #06cd69,
    #ffcd00,
    #ff5c22,
    #ff2e4e
  );
}
.btn .child {
  text-shadow: 0px 0px 9px rgb(0 0 0 / 62%);
}

.toolbar {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  z-index: 1;
}


================================================
FILE: website/tailwind.config.js
================================================
module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      sans: ['Poppins', 'sans-serif'],
    },
    extend: {
      screens: {
        xs: '365px',
      },
      zIndex: {
        '-1': '-1',
      },
      colors: {
        // primary: 'rgba(139, 92, 246)',
        primary: '#FF8A65',
        bg: '#0F0F0F',
        card: '#151515',
        border: '#1d1d1d',
      },
      boxShadow: {
        primary: '0 10px 30px rgb(0 0 0 / 8%)',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}


================================================
FILE: website/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}