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"]
}
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
SYMBOL INDEX (24 symbols across 15 files)
FILE: website/components/IconList.tsx
constant ICON_CONTAINER_SIZE (line 18) | const ICON_CONTAINER_SIZE = 150
FILE: website/components/IconVariant.tsx
type ListProps (line 8) | interface ListProps {
FILE: website/components/SelectedIcon.tsx
type ICode (line 121) | interface ICode {
type IButton (line 195) | interface IButton {
FILE: website/components/Selector.tsx
type OptionValue (line 6) | type OptionValue = VariantType | number
type OptionType (line 8) | type OptionType<T extends OptionValue> = T
type Props (line 10) | interface Props<T extends OptionValue> {
FILE: website/hooks/useDebounce.ts
type UseDebounceReturn (line 4) | type UseDebounceReturn = [() => boolean | null, () => void];
function useDebounce (line 6) | function useDebounce(
FILE: website/hooks/useOnClickOutside.ts
type AnyEvent (line 3) | type AnyEvent = MouseEvent | TouchEvent
function useOnClickOutside (line 5) | function useOnClickOutside<T extends HTMLElement = HTMLElement>(
FILE: website/hooks/useTimeoutFn.ts
type UseTimeoutFnReturn (line 3) | type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
function useTimeoutFn (line 5) | function useTimeoutFn(fn: Function, ms: number = 0): UseTimeoutFnReturn {
FILE: website/hooks/useWindowSize.ts
type WindowSize (line 3) | interface WindowSize {
FILE: website/lib/icons.ts
type iconType (line 4) | type iconType = keyof typeof Icons
type IIconsArray (line 6) | interface IIconsArray {
FILE: website/pages/_app.tsx
function MyApp (line 5) | function MyApp({ Component, pageProps }: AppProps) {
FILE: website/pages/api/hello.ts
type Data (line 4) | type Data = {
function handler (line 8) | function handler(
FILE: website/store/IconContext.tsx
type VariantType (line 13) | type VariantType = typeof Variants[number] | undefined
type IconState (line 15) | interface IconState {
FILE: website/store/iconReducer.ts
type IconAction (line 3) | type IconAction =
FILE: website/store/searchState.ts
type Search (line 3) | interface Search {
FILE: website/store/selectedStore.ts
type SelectedState (line 4) | interface SelectedState {
Condensed preview — 61 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (79K chars).
[
{
"path": ".gitignore",
"chars": 142,
"preview": "node_modules\n\npackages/*/dist\npackages/*/node_modules\npackages/*/src/*\n\n\n\n\nwebsite/node_modules\nwebsite/.next\nwebsite/ou"
},
{
"path": ".prettierrc",
"chars": 264,
"preview": "{\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": false,\n \"jsxSingleQuote\": false,\n \"printWidth\": 100,\n \"proseWrap\""
},
{
"path": "CONTRIBUTING.md",
"chars": 0,
"preview": ""
},
{
"path": "LICENSE",
"chars": 1053,
"preview": "Copyright (c) ERFAN KHADIVAR\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this softw"
},
{
"path": "README.md",
"chars": 1541,
"preview": "<h1 align=\"center\">iconsax for React and React Native</h1>\n\n<p align=\"center\">\n 1000 icons in 6 different styles, total"
},
{
"path": "lerna.json",
"chars": 166,
"preview": "{\n \"packages\": [\"packages/*\", \"website\" ],\n \"version\": \"independent\",\n \"npmClient\": \"yarn\",\n \"useWorkspaces\": true,\n"
},
{
"path": "meta-data.json",
"chars": 13370,
"preview": "{\"variants\":[\"Bold\",\"Broken\",\"Bulk\",\"Linear\",\"Outline\",\"TwoTone\"],\"categories\":[{\"name\":\"Archive\",\"icons\":[\"ArchiveAdd\","
},
{
"path": "package.json",
"chars": 760,
"preview": "{\n \"name\": \"iconsax\",\n \"description\": \"iconsax for react and react native\",\n \"private\": true,\n \"workspaces\": {\n \""
},
{
"path": "packages/iconsax-react/.babelrc",
"chars": 125,
"preview": "{\n \"presets\": [[\"@babel/env\", { \"modules\": false }], \"@babel/react\"],\n \"plugins\": [\"@babel/proposal-object-rest-spread"
},
{
"path": "packages/iconsax-react/.npmignore",
"chars": 4,
"preview": "src\n"
},
{
"path": "packages/iconsax-react/README.md",
"chars": 1539,
"preview": "<h1 align=\"center\">iconsax for React</h1>\n\n<a href=\"https://www.npmjs.com/package/iconsax-react-nativejs\">for React Nati"
},
{
"path": "packages/iconsax-react/package.json",
"chars": 1697,
"preview": "{\n \"name\": \"iconsax-reactjs\",\n \"version\": \"0.0.8\",\n \"description\": \"Iconsax icon pack for React\",\n \"author\": \"Erfan "
},
{
"path": "packages/iconsax-react/rollup.config.js",
"chars": 956,
"preview": "import resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport babel from '@r"
},
{
"path": "packages/iconsax-react-native/.babelrc",
"chars": 125,
"preview": "{\n \"presets\": [[\"@babel/env\", { \"modules\": false }], \"@babel/react\"],\n \"plugins\": [\"@babel/proposal-object-rest-spread"
},
{
"path": "packages/iconsax-react-native/.npmignore",
"chars": 4,
"preview": "src\n"
},
{
"path": "packages/iconsax-react-native/README.md",
"chars": 1588,
"preview": "<h1 align=\"center\">iconsax for React Native</h1>\n\n<a href=\"https://www.npmjs.com/package/iconsax-reactjs\">for React</a>\n"
},
{
"path": "packages/iconsax-react-native/package.json",
"chars": 1920,
"preview": "{\n \"name\": \"iconsax-react-nativejs\",\n \"version\": \"0.0.8\",\n \"author\": \"Erfan Khadivar <rendinjast@gmail.com>\",\n \"home"
},
{
"path": "packages/iconsax-react-native/rollup.config.js",
"chars": 956,
"preview": "import resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport babel from '@r"
},
{
"path": "scripts/build.js",
"chars": 1865,
"preview": "const cc = require('camelcase');\nconst path = require('path');\nconst fs = require('fs').promises;\nconst existsSync = req"
},
{
"path": "scripts/fetchIcon.js",
"chars": 668,
"preview": "const path = require('path');\nconst fs = require('fs');\n\nconst { readdirSync } = fs;\n\nconst rootDir = path.resolve();\n\nc"
},
{
"path": "scripts/generateIcons.js",
"chars": 7888,
"preview": "/* eslint-disable no-unreachable */\n/* eslint-disable no-param-reassign */\n/* eslint-disable indent */\n/* eslint-disable"
},
{
"path": "website/.eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": "website/.prettierrc",
"chars": 43,
"preview": "{\n \"singleQuote\": true,\n \"semi\": false\n}\n"
},
{
"path": "website/.vscode/settings.json",
"chars": 37,
"preview": "{\n \"cSpell.words\": [\"Customizer\"]\n}\n"
},
{
"path": "website/Containers/IconContainer.tsx",
"chars": 338,
"preview": "import { IconCustomizer, IconList, SelectedIcon } from '../components'\nimport { IconContext } from '../store'\n\nexport co"
},
{
"path": "website/components/Header.tsx",
"chars": 2681,
"preview": "import React from 'react'\nimport { Heart } from 'iconsax-reactjs'\nimport { RainbowButton } from '.'\n\nexport const Header"
},
{
"path": "website/components/IconColor.tsx",
"chars": 1250,
"preview": "import { useRef, useState } from 'react'\nimport { BlockPicker, ColorChangeHandler } from 'react-color'\nimport { useIconC"
},
{
"path": "website/components/IconCustomizer.tsx",
"chars": 562,
"preview": "import { IconColor, IconSearch, IconSize, IconVariant } from '.'\n\nexport const IconCustomizer = () => {\n return (\n <"
},
{
"path": "website/components/IconItem.tsx",
"chars": 1610,
"preview": "import { useRef } from 'react'\nimport gsap from 'gsap'\nimport { Icon } from 'iconsax-reactjs'\nimport { useIconContext, s"
},
{
"path": "website/components/IconList.tsx",
"chars": 3135,
"preview": "import { useEffect, useState } from 'react'\nimport icons, { IIconsArray } from '../lib/icons'\nimport { IconItem } from '"
},
{
"path": "website/components/IconSearch.tsx",
"chars": 834,
"preview": "import { SearchNormal } from 'iconsax-reactjs'\nimport React, { useState, useCallback } from 'react'\nimport { useDebounce"
},
{
"path": "website/components/IconSize.tsx",
"chars": 508,
"preview": "import { ArrowDown2 } from 'iconsax-reactjs'\nimport { useRef, useState } from 'react'\nimport { useIconContext } from '.."
},
{
"path": "website/components/IconVariant.tsx",
"chars": 1765,
"preview": "import { Dispatch, useEffect } from 'react'\nimport { Selector } from '.'\nimport { useWindowSize } from '../hooks'\nimport"
},
{
"path": "website/components/RainbowButton.tsx",
"chars": 551,
"preview": "import { FC } from 'react'\n\nexport const RainbowButton: FC = ({ children }) => {\n return (\n <a\n target=\"_blank\""
},
{
"path": "website/components/SelectedIcon.tsx",
"chars": 6231,
"preview": "import { ReactElement, useEffect, useRef, useState } from 'react'\nimport { renderToString } from 'react-dom/server'\nimpo"
},
{
"path": "website/components/Selector.tsx",
"chars": 1715,
"preview": "import { ArrowDown2 } from 'iconsax-reactjs'\nimport { useRef, useState } from 'react'\nimport { useOnClickOutside, useWin"
},
{
"path": "website/components/index.ts",
"chars": 456,
"preview": "export { Header } from './Header'\nexport { Selector } from './Selector'\nexport { IconItem } from './IconItem'\nexport { I"
},
{
"path": "website/hooks/index.ts",
"chars": 148,
"preview": "export { useDebounce } from './useDebounce'\nexport { useOnClickOutside } from './useOnClickOutside'\nexport { useWindowSi"
},
{
"path": "website/hooks/useDebounce.ts",
"chars": 393,
"preview": "import { DependencyList, useEffect } from 'react';\nimport useTimeoutFn from './useTimeoutFn';\n\nexport type UseDebounceRe"
},
{
"path": "website/hooks/useOnClickOutside.ts",
"chars": 816,
"preview": "import { RefObject, useEffect } from 'react'\n\ntype AnyEvent = MouseEvent | TouchEvent\n\nexport function useOnClickOutside"
},
{
"path": "website/hooks/useTimeoutFn.ts",
"chars": 1017,
"preview": "import { useCallback, useEffect, useRef } from 'react';\n\nexport type UseTimeoutFnReturn = [() => boolean | null, () => v"
},
{
"path": "website/hooks/useWindowSize.ts",
"chars": 663,
"preview": "import { useEffect, useState } from 'react'\n\ninterface WindowSize {\n width: number\n height: number\n}\n\nexport const use"
},
{
"path": "website/lib/icons.ts",
"chars": 330,
"preview": "import * as Icons from 'iconsax-reactjs'\nimport { Icon } from 'iconsax-reactjs'\n\ntype iconType = keyof typeof Icons\n\nexp"
},
{
"path": "website/next-env.d.ts",
"chars": 245,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/types/global\" />\n/// <reference types=\"next/image-types/global"
},
{
"path": "website/next.config.js",
"chars": 282,
"preview": "/** @type {import('next').NextConfig} */\nmodule.exports = {\n reactStrictMode: true,\n webpack: (config) => {\n config"
},
{
"path": "website/package.json",
"chars": 993,
"preview": "{\n \"name\": \"website\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next"
},
{
"path": "website/pages/_app.tsx",
"chars": 221,
"preview": "import type { AppProps } from 'next/app'\nimport '../styles/globals.css'\nimport 'tailwindcss/tailwind.css'\n\nfunction MyAp"
},
{
"path": "website/pages/_document.tsx",
"chars": 290,
"preview": "import React from 'react'\nimport { Html, Head, Main, NextScript } from 'next/document'\n\nconst _document = () => {\n retu"
},
{
"path": "website/pages/api/hello.ts",
"chars": 307,
"preview": "// Next.js API route support: https://nextjs.org/docs/api-routes/introduction\nimport type { NextApiRequest, NextApiRespo"
},
{
"path": "website/pages/index.tsx",
"chars": 1677,
"preview": "import type { NextPage } from 'next'\nimport Head from 'next/head'\nimport { Header } from '../components'\nimport { IconCo"
},
{
"path": "website/postcss.config.js",
"chars": 82,
"preview": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n"
},
{
"path": "website/public/browserconfig.xml",
"chars": 246,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo"
},
{
"path": "website/public/site.webmanifest",
"chars": 287,
"preview": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/android-chrome-96x96.png\",\n "
},
{
"path": "website/store/IconContext.tsx",
"chars": 947,
"preview": "import { createContext, useContext, Dispatch, FC, useReducer } from 'react'\nimport IconReducer, { IconAction } from './i"
},
{
"path": "website/store/iconReducer.ts",
"chars": 715,
"preview": "import { IconState, VariantType } from './IconContext'\n\nexport type IconAction =\n | { type: 'SEARCH'; payload: string }"
},
{
"path": "website/store/index.ts",
"chars": 173,
"preview": "export { default as IconContext, useIconContext, Variants } from './IconContext'\nexport { searchStore } from './searchSt"
},
{
"path": "website/store/searchState.ts",
"chars": 214,
"preview": "import create from 'zustand'\n\ninterface Search {\n query: string\n setQuery: (query: string) => void\n}\n\nexport const sea"
},
{
"path": "website/store/selectedStore.ts",
"chars": 371,
"preview": "import { IIconsArray } from '../lib/icons'\nimport create from 'zustand'\n\ninterface SelectedState {\n selected: IIconsArr"
},
{
"path": "website/styles/globals.css",
"chars": 641,
"preview": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');\n\n"
},
{
"path": "website/tailwind.config.js",
"chars": 605,
"preview": "module.exports = {\n mode: 'jit',\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n them"
},
{
"path": "website/tsconfig.json",
"chars": 484,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
}
]
About this extraction
This page contains the full source code of the rendinjast/iconsax-react GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 61 files (68.9 KB), approximately 19.9k tokens, and a symbol index with 24 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.