[
{
"path": ".gitignore",
"content": "node_modules\n\npackages/*/dist\npackages/*/node_modules\npackages/*/src/*\n\n\n\n\nwebsite/node_modules\nwebsite/.next\nwebsite/out\n\n\n\nyarn-error.log*\n\n"
},
{
"path": ".prettierrc",
"content": "{\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": false,\n \"jsxSingleQuote\": false,\n \"printWidth\": 100,\n \"proseWrap\": \"always\",\n \"quoteProps\": \"as-needed\",\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"all\",\n \"useTabs\": false\n}\n"
},
{
"path": "CONTRIBUTING.md",
"content": ""
},
{
"path": "LICENSE",
"content": "Copyright (c) ERFAN KHADIVAR\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and\nassociated documentation files (the \"Software\"), to deal in the Software without restriction,\nincluding without limitation the rights to use, copy, modify, merge, publish, distribute,\nsublicense, and/or sell copies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial\nportions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT\nNOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES\nOR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n"
},
{
"path": "README.md",
"content": "iconsax for React and React Native \n\n\n 1000 icons in 6 different styles, total 6000 icons | \nPerfectly balance | \n24px grid-based\n
\n\n
\n Browse icons at site
\niconsax for React \n\nfor React Native \n\n\n 1000 icons in 6 different styles, total 6000 icons | \nPerfectly balance | \n24px grid-based\n
\n\n
\n Browse icons at site
\nCONTRIBUTING.md \n\n## License\n\nMIT \n"
},
{
"path": "packages/iconsax-react/package.json",
"content": "{\n \"name\": \"iconsax-reactjs\",\n \"version\": \"0.0.8\",\n \"description\": \"Iconsax icon pack for React\",\n \"author\": \"Erfan Khadivar \",\n \"homepage\": \"https://iconsax.erfan.ee\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/rendinjast/iconsax-react.git\",\n \"directory\": \"packages/iconsax-react\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/rendinjast/iconsax-react/issues\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"license\": \"MIT\",\n \"main\": \"dist/cjs/index.js\",\n \"module\": \"dist/esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"sideEffects\": false,\n \"scripts\": {\n \"preBuild\": \"rm -rf dist\",\n \"build:bundle\": \"rollup --config rollup.config.js\",\n \"build\": \"yarn preBuild && yarn build:bundle\"\n },\n \"keywords\": [\n \"icons\",\n \"react\",\n \"icon components\",\n \"iconsax\"\n ],\n \"files\": [\n \"dist\"\n ],\n \"devDependencies\": {\n \"@babel/cli\": \"^7.15.7\",\n \"@babel/core\": \"^7.15.5\",\n \"@babel/plugin-proposal-object-rest-spread\": \"^7.15.6\",\n \"@babel/preset-env\": \"^7.15.6\",\n \"@babel/preset-react\": \"^7.14.5\",\n \"@rollup/plugin-babel\": \"^5.3.0\",\n \"@rollup/plugin-commonjs\": \"^20.0.0\",\n \"@rollup/plugin-node-resolve\": \"^13.0.4\",\n \"@types/react\": \"^17.0.22\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\",\n \"babel-preset-env\": \"^1.7.0\",\n \"react\": \"^17.0.2\",\n \"rollup\": \"^2.56.3\",\n \"rollup-plugin-copy\": \"^3.4.0\",\n \"rollup-plugin-filesize\": \"^9.1.1\",\n \"rollup-plugin-multi-input\": \"^1.3.1\",\n \"rollup-plugin-peer-deps-external\": \"^2.2.4\",\n \"rollup-plugin-terser\": \"^7.0.2\",\n \"rollup-plugin-uglify\": \"^6.0.4\"\n },\n \"peerDependencies\": {\n \"react\": \"*\"\n }\n}\n"
},
{
"path": "packages/iconsax-react/rollup.config.js",
"content": "import resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport babel from '@rollup/plugin-babel';\nimport copy from 'rollup-plugin-copy';\nimport external from 'rollup-plugin-peer-deps-external';\nimport multiInput from 'rollup-plugin-multi-input';\n\nconst input = ['src/**/*.js'];\nconst output = [\n {\n dir: 'dist/cjs',\n format: 'cjs',\n exports: 'auto',\n sourcemap: false,\n },\n {\n dir: 'dist/esm',\n format: 'es',\n exports: 'auto',\n sourcemap: false,\n },\n];\n\nconst plugins = [];\nplugins.push(\n babel({\n exclude: 'node_modules/**',\n }),\n);\nplugins.push(multiInput());\nplugins.push(external());\nplugins.push(resolve());\nplugins.push(commonjs());\nplugins.push(\n copy({\n targets: [\n { src: 'src/index.d.ts', dest: 'dist' },\n { src: '../../meta-data.json', dest: 'dist' },\n ],\n }),\n);\nexport default {\n input,\n output,\n external: ['react', 'prop-types'],\n plugins,\n};\n"
},
{
"path": "packages/iconsax-react-native/.babelrc",
"content": "{\n \"presets\": [[\"@babel/env\", { \"modules\": false }], \"@babel/react\"],\n \"plugins\": [\"@babel/proposal-object-rest-spread\"]\n}\n"
},
{
"path": "packages/iconsax-react-native/.npmignore",
"content": "src\n"
},
{
"path": "packages/iconsax-react-native/README.md",
"content": "iconsax for React Native \n\nfor React \n\n\n 1000 icons in 6 different styles, total 6000 icons | \nPerfectly balance | \n24px grid-based\n
\n\n
\n Browse icons at site
\n\nCONTRIBUTING.md \n\n## License\n\nMIT \n"
},
{
"path": "packages/iconsax-react-native/package.json",
"content": "{\n \"name\": \"iconsax-react-nativejs\",\n \"version\": \"0.0.8\",\n \"author\": \"Erfan Khadivar \",\n \"homepage\": \"https://iconsax.erfan.ee/\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/rendinjast/iconsax-react.git\",\n \"directory\": \"packages/iconsax-react-native\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/rendinjast/iconsax-react/issues\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"license\": \"MIT\",\n \"main\": \"dist/cjs/index.js\",\n \"module\": \"dist/esm/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"sideEffects\": false,\n \"scripts\": {\n \"gen\": \"node ./scripts/build.js\",\n \"preBuild\": \"rm -rf dist\",\n \"build:bundle\": \"rollup --config rollup.config.js\",\n \"build\": \"yarn preBuild && yarn build:bundle\"\n },\n \"keywords\": [\n \"icons\",\n \"react-native\",\n \"icon components\",\n \"iconsax\"\n ],\n \"files\": [\n \"dist\"\n ],\n \"devDependencies\": {\n \"@babel/cli\": \"^7.15.7\",\n \"@babel/core\": \"^7.15.5\",\n \"@babel/plugin-proposal-object-rest-spread\": \"^7.15.6\",\n \"@babel/preset-env\": \"^7.15.6\",\n \"@babel/preset-react\": \"^7.14.5\",\n \"@rollup/plugin-babel\": \"^5.3.0\",\n \"@rollup/plugin-commonjs\": \"^20.0.0\",\n \"@rollup/plugin-node-resolve\": \"^13.0.4\",\n \"@types/react\": \"^17.0.22\",\n \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\",\n \"babel-preset-env\": \"^1.7.0\",\n \"eslint-config-airbnb\": \"^18.2.1\",\n \"eslint-plugin-import\": \"^2.24.2\",\n \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n \"eslint-plugin-react\": \"^7.25.3\",\n \"react\": \"^17.0.2\",\n \"react-native-svg\": \"^12.1.1\",\n \"rollup\": \"^2.56.3\",\n \"rollup-plugin-copy\": \"^3.4.0\",\n \"rollup-plugin-filesize\": \"^9.1.1\",\n \"rollup-plugin-peer-deps-external\": \"^2.2.4\",\n \"rollup-plugin-terser\": \"^7.0.2\",\n \"rollup-plugin-uglify\": \"^6.0.4\"\n },\n \"peerDependencies\": {\n \"react\": \"*\",\n \"react-native\": \">=0.46\",\n \"react-native-svg\": \">=5.3\"\n }\n}\n"
},
{
"path": "packages/iconsax-react-native/rollup.config.js",
"content": "import resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport babel from '@rollup/plugin-babel';\nimport copy from 'rollup-plugin-copy';\nimport external from 'rollup-plugin-peer-deps-external';\nimport multiInput from 'rollup-plugin-multi-input';\n\nconst input = ['src/**/*.js'];\nconst output = [\n {\n dir: 'dist/cjs',\n format: 'cjs',\n exports: 'auto',\n sourcemap: false,\n },\n {\n dir: 'dist/esm',\n format: 'es',\n exports: 'auto',\n sourcemap: false,\n },\n];\n\nconst plugins = [];\nplugins.push(\n babel({\n exclude: 'node_modules/**',\n }),\n);\nplugins.push(multiInput());\nplugins.push(external());\nplugins.push(resolve());\nplugins.push(commonjs());\nplugins.push(\n copy({\n targets: [\n { src: 'src/index.d.ts', dest: 'dist' },\n { src: '../../meta-data.json', dest: 'dist' },\n ],\n }),\n);\nexport default {\n input,\n output,\n external: ['react', 'prop-types'],\n plugins,\n};\n"
},
{
"path": "scripts/build.js",
"content": "const cc = require('camelcase');\nconst path = require('path');\nconst fs = require('fs').promises;\nconst existsSync = require('fs').existsSync;\nconst fetchIcon = require('./fetchIcon');\nconst generateIcons = require('./generateIcons');\n\n// Paths\nconst rootDir = path.resolve();\nconst IconsDir = path.join(rootDir, 'icons');\nconst packagesDir = path.join(rootDir, 'packages');\nconst packages = ['react', 'react-native'];\n\nconst space = () => console.log('-----------------------------');\nconst main = async () => {\n try {\n // 1. fetching icon form svg files\n space();\n console.log('1. fetching icon files');\n const icons = await fetchIcon(IconsDir);\n console.log(icons);\n\n space();\n packages.forEach(async (p) => {\n const srPath = path.join(packagesDir, `iconsax-${p}`, 'src');\n\n // 2. generating meta-data file\n console.log(`----- generating meta-data file -> ${p}`);\n const categories = icons.categories.map((cat) => {\n const icons = cat.icons.map((i) => {\n if (i.match(/^\\d/)) {\n i = 'I' + i;\n }\n return cc(i.replace('.svg', ''), { pascalCase: true });\n });\n return { ...cat, icons };\n });\n await fs.writeFile(\n path.join(rootDir, 'meta-data.json'),\n JSON.stringify({ variants: icons.variants, categories }),\n );\n\n // 3. cleaning old icons\n console.log(`----- cleaning old icons -> ${p}`);\n\n // const isDirectory = stat.isDirectory();\n const exist = existsSync(srPath);\n if (exist) {\n await fs.rm(srPath, {\n recursive: true,\n force: true,\n });\n }\n await fs.mkdir(srPath);\n\n // 4. generating icons\n // await generateIcons['react-native'](icons);\n await generateIcons[p](icons);\n });\n } catch (err) {\n throw new Error(err.message);\n }\n};\nmain();\n"
},
{
"path": "scripts/fetchIcon.js",
"content": "const path = require('path');\nconst fs = require('fs');\n\nconst { readdirSync } = fs;\n\nconst rootDir = path.resolve();\n\nconst IconsDir = path.join(rootDir, 'icons');\n// does not matter witch variant(Linear, Outline, TwoTone,...) folder\n// cause all of them have similar icon name\nconst categoriesDir = path.join(IconsDir, 'Linear');\n\nconst fetchIcon = async () => {\n const variants = readdirSync(IconsDir);\n\n const _categories = readdirSync(categoriesDir);\n const categories = _categories.map((x) => {\n const icons = readdirSync(path.join(categoriesDir, x));\n return { name: x, icons };\n });\n return { variants, categories };\n};\n\nmodule.exports = fetchIcon;\n"
},
{
"path": "scripts/generateIcons.js",
"content": "/* eslint-disable no-unreachable */\n/* eslint-disable no-param-reassign */\n/* eslint-disable indent */\n/* eslint-disable max-len */\nconst path = require('path');\nconst fs = require('fs').promises;\nconst { readFileSync } = require('fs');\nconst cheerio = require('cheerio');\nconst prettier = require('prettier-eslint');\nconst cc = require('camelcase');\nconst { log } = require('console');\n\n// Paths\nconst rootDir = path.resolve();\nconst IconsDir = path.join(rootDir, 'icons');\nconst packageDir = path.join(rootDir, 'packages');\n\n// format files before write\nconst format = (text) =>\n // eslint-disable-next-line implicit-arrow-linebreak\n prettier({\n text,\n eslintConfig: {\n extends: 'airbnb',\n },\n prettierOptions: {\n bracketSpacing: true,\n singleQuote: true,\n parser: 'flow',\n },\n });\n\nconst convertAttrsToReactAttrs = (obj) => {\n const keyValues = Object.keys(obj).map((key) => {\n const newKey = cc(key);\n let newValue = obj[key];\n if (newValue.match(/^(#292D32|#17191C|#000)$/)) newValue = '%%{color}%%';\n if (newKey.match(/^(width|height)$/) && newValue.match('24')) newValue = '%%{size}%%';\n\n return { [newKey]: newValue };\n });\n return Object.assign({}, ...keyValues);\n};\nconst reactiveChildren = (children, isNative) => {\n if (!children.length > 0) return;\n const newChidlren = children.map((c) => {\n if (isNative && c.name) c.name = c.name[0].toUpperCase() + c.name.slice(1);\n if (!c.attribs) return c;\n const attribs = convertAttrsToReactAttrs(c.attribs);\n return { ...c, attribs };\n });\n\n return newChidlren;\n};\nconst convertElementInsideSvgToReactElement = (svgFile, isNative) => {\n const $ = cheerio.load(svgFile);\n const elem = $('svg > *');\n elem.each((_, element) => {\n if (isNative) element.name = element.name[0].toUpperCase() + element.name.slice(1);\n const attrs = convertAttrsToReactAttrs(element.attribs);\n element.attribs = attrs;\n const newc = reactiveChildren(element.children, isNative);\n if (newc) element.children = newc;\n });\n const final = elem.toString().replace(/\"?%%\"?/g, '');\n return final;\n};\n\nconst loopAllVariant = (iconsAllVariant, isNative) => {\n const loop = iconsAllVariant.map((iav) => {\n return `const ${iav.variant} = ({color}) => (<>${convertElementInsideSvgToReactElement(\n iav.svgFile,\n isNative,\n )})`;\n });\n return loop.join('\\n\\n');\n};\n\nconst switchStatementForVariants = (iconsAllVariant) => {\n const cases = iconsAllVariant.map(\n (iav) => `\n case '${iav.variant}':\n return <${iav.variant} color={color} />\n `,\n );\n return `const chooseVariant = (variant, color) => {\n switch (variant) {\n ${cases.join('')}\n default:\n return {\n variant?: 'Linear' | 'Outline' | 'Broken' | 'Bold' | 'Bulk' | 'TwoTone';\n ref?: Ref;\n color?: string;\n size?: string | number;\n}\nexport type Icon = FC;\n`;\n\nconst react = async (icons) => {\n console.log('----- generating icons -> react');\n const builtSourceDir = path.join(packageDir, 'iconsax-react', 'src');\n await fs.writeFile(path.join(builtSourceDir, 'index.js'), '', 'utf-8');\n await fs.writeFile(\n path.join(builtSourceDir, 'index.d.ts'),\n format(initialTypeDefinitions),\n 'utf-8',\n );\n\n icons.categories.forEach(async (category) => {\n category.icons.forEach(async (icon) => {\n const iconsAllVariant = icons.variants.map((variant) => {\n const svgFile = readFileSync(path.join(IconsDir, variant, category.name, icon));\n return { variant, svgFile };\n });\n\n let ComponentName = cc(icon.replace('.svg', ''), { pascalCase: true });\n\n if (ComponentName.match(/^\\d/)) {\n ComponentName = 'I' + ComponentName;\n }\n const element = `\n import React, {forwardRef} from 'react';\n\n ${loopAllVariant(iconsAllVariant)}\n\n ${switchStatementForVariants(iconsAllVariant)}\n\n const ${ComponentName} =\n forwardRef(({ variant = 'Linear', color = 'currentColor', size = '24', ...rest }, ref) => {\n return (\n \n {chooseVariant(variant, color)}\n )\n });\n\n ${ComponentName}.displayName = '${ComponentName}'\n\n export default ${ComponentName}\n `;\n\n await fs.writeFile(\n path.join(builtSourceDir, `${ComponentName}.js`),\n format(element),\n 'utf-8',\n );\n\n // add export component to index.js\n const exportString = `export { default as ${ComponentName} } from './${ComponentName}.js';\\r\\n`;\n await fs.appendFile(path.join(builtSourceDir, 'index.js'), exportString, 'utf-8');\n\n // add type definition for component in index.d.ts\n const exportTypeString = `export const ${ComponentName}: Icon;\\n`;\n await fs.appendFile(path.join(builtSourceDir, 'index.d.ts'), exportTypeString, 'utf-8');\n });\n });\n};\nconst nativeInitialTypeDefinitions = `/// >;\n color?: string;\n size?: string | number;\n}\nexport type Icon = FC;\n`;\nconst reactNative = async (icons) => {\n console.log('----- generating icons -> react native');\n const builtSourceDir = path.join(packageDir, 'iconsax-react-native', 'src');\n await fs.writeFile(path.join(builtSourceDir, 'index.js'), '', 'utf-8');\n await fs.writeFile(\n path.join(builtSourceDir, 'index.d.ts'),\n format(nativeInitialTypeDefinitions),\n 'utf-8',\n );\n icons.categories.forEach(async (category) => {\n category.icons.forEach(async (icon) => {\n const iconsAllVariant = icons.variants.map((variant) => {\n const svgFile = readFileSync(path.join(IconsDir, variant, category.name, icon));\n return { variant, svgFile };\n });\n\n let ComponentName = cc(icon.replace('.svg', ''), { pascalCase: true });\n\n if (ComponentName.match(/^\\d/)) {\n ComponentName = 'I' + ComponentName;\n }\n const element = `\n import React, {forwardRef} from 'react';\n import Svg, { Path, G } from 'react-native-svg';\n\n ${loopAllVariant(iconsAllVariant, true)}\n\n ${switchStatementForVariants(iconsAllVariant)}\n\n const ${ComponentName} =\n forwardRef(({ variant = 'Linear', color = 'currentColor', size = '24', ...rest }, ref) => {\n return (\n \n {chooseVariant(variant, color)}\n )\n });\n\n ${ComponentName}.displayName = '${ComponentName}'\n export default ${ComponentName}\n `;\n\n await fs.writeFile(\n path.join(builtSourceDir, `${ComponentName}.js`),\n format(element),\n 'utf-8',\n );\n\n // add export component to index.js\n const exportString = `export { default as ${ComponentName} } from './${ComponentName}.js';\\r\\n`;\n await fs.appendFile(path.join(builtSourceDir, 'index.js'), exportString, 'utf-8');\n\n // add type definition for component in index.d.ts\n const exportTypeString = `export const ${ComponentName}: Icon;\\n`;\n await fs.appendFile(path.join(builtSourceDir, 'index.d.ts'), exportTypeString, 'utf-8');\n });\n });\n};\nconst generateIcons = {\n react,\n 'react-native': reactNative,\n};\n\nmodule.exports = generateIcons;\n"
},
{
"path": "website/.eslintrc.json",
"content": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": "website/.prettierrc",
"content": "{\n \"singleQuote\": true,\n \"semi\": false\n}\n"
},
{
"path": "website/.vscode/settings.json",
"content": "{\n \"cSpell.words\": [\"Customizer\"]\n}\n"
},
{
"path": "website/Containers/IconContainer.tsx",
"content": "import { IconCustomizer, IconList, SelectedIcon } from '../components'\nimport { IconContext } from '../store'\n\nexport const IconContainer = () => {\n return (\n \n \n \n
\n )\n}\n"
},
{
"path": "website/components/Header.tsx",
"content": "import React from 'react'\nimport { Heart } from 'iconsax-reactjs'\nimport { RainbowButton } from '.'\n\nexport const Header = () => {\n return (\n \n
\n
\n ©️ iconsax\n \n official website\n \n \n github page\n \n \n
\n Website Designed and built with\n \n Erfan Khadivar\n \n \n
\n
\n
\n ICONSAX for React and React Native\n \n\n
\n {/*
\n iconsax-reactjs npm\n */}\n
Get Started ✌️ \n
\n
\n React\n \n \n React Native\n \n \n
\n
\n
\n
setIsOpen((prv) => !prv)}\n style={{\n backgroundColor: state.color,\n textShadow: '1px 1px 4px black',\n }}\n className=\"h-10 grid place-items-center px-4 rounded-xl cursor-pointer\"\n >\n {state.color} \n \n
\n )}\n \n )\n}\n"
},
{
"path": "website/components/IconCustomizer.tsx",
"content": "import { IconColor, IconSearch, IconSize, IconVariant } from '.'\n\nexport const IconCustomizer = () => {\n return (\n \n )\n}\n"
},
{
"path": "website/components/IconItem.tsx",
"content": "import { useRef } from 'react'\nimport gsap from 'gsap'\nimport { Icon } from 'iconsax-reactjs'\nimport { useIconContext, selectedStore } from '../store'\n\n// eslint-disable-next-line react/display-name\nconst IC = ({ Icon }: { Icon: Icon }) => {\n const {\n state: { color, size, variant },\n } = useIconContext()\n return (\n \n \n )\n}\n\nconst duration = 0.3\nexport const IconItem = ({ Icon, name }: { Icon: Icon; name: string }) => {\n const showIcon = selectedStore((state) => state.showIcon)\n const ref = useRef(null)\n\n const animateEnter = () => {\n gsap\n .to(ref.current, {\n translateY: '-2px',\n borderColor: '#FF8A65',\n duration,\n })\n .play()\n }\n const animateLeave = () => {\n gsap\n .to(ref.current, { translateY: '2px', borderColor: '#1d1d1d', duration })\n .play()\n }\n\n const handleClick = () => {\n showIcon({ name, Icon })\n }\n\n return (\n \n \n \n {name}\n \n
\n \n )\n}\n"
},
{
"path": "website/components/IconList.tsx",
"content": "import { useEffect, useState } from 'react'\nimport icons, { IIconsArray } from '../lib/icons'\nimport { IconItem } from '.'\nimport { searchStore } from '../store'\nimport { EmojiSad } from 'iconsax-reactjs'\nimport { AutoSizer, List, WindowScroller } from 'react-virtualized'\n\nconst Empty = () => {\n return (\n \n \n \n Nothing Found \n
\n )\n}\nconst ICON_CONTAINER_SIZE = 150\n\nexport const IconList = () => {\n const [filtered, setFiltered] = useState(icons)\n const [numColumns, setNumColumns] = useState(1)\n\n const query = searchStore((state) => state.query)\n\n const onResize = ({ width }: { width: number }) => {\n if (width <= 576) {\n setNumColumns(Math.floor(width / ICON_CONTAINER_SIZE))\n } else {\n setNumColumns(Math.floor(width / ICON_CONTAINER_SIZE))\n }\n }\n useEffect(() => {\n console.log(query)\n const f =\n icons.filter((x) =>\n x.name.toLowerCase().includes(query!.toLowerCase())\n ) || []\n setFiltered(f)\n }, [query])\n return (\n \n
\n {filtered.length > 0 ? (\n
\n {({ height, isScrolling, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n (\n \n {Array.from(\n { length: numColumns },\n (_, columnIndex) => {\n const icon =\n filtered[rowIndex * numColumns + columnIndex]\n if (!icon) {\n return null\n }\n return (\n \n )}\n />\n )}\n \n )}\n \n ) : (\n
\n )}\n
\n
\n )\n}\n"
},
{
"path": "website/components/IconSize.tsx",
"content": "import { ArrowDown2 } from 'iconsax-reactjs'\nimport { useRef, useState } from 'react'\nimport { useIconContext } from '../store'\nimport { Selector } from '.'\n\nconst options = [12, 16, 24, 32, 44, 60, 80]\n\nexport const IconSize = () => {\n const { state, dispatch } = useIconContext()\n\n const onChange = (op: number) => {\n dispatch({ type: 'CHANGE_SIZE', payload: op })\n }\n return (\n \n}\n\nconst MenuList = ({ state, dispatch }: ListProps) => {\n return (\n <>\n \n {Variants.map((variant) => (\n \n dispatch({ type: 'CHANGE_VARIANT', payload: variant })\n }\n className={`px-1 xs:px-4 cursor-pointer grid place-items-center transition-colors duration-300 ${\n variant === state.variant ? 'bg-primary text-white' : 'bg-card'\n }`}\n key={variant}\n >\n {variant}\n \n ))}\n
\n \n )\n}\nconst DropDownList = ({ state, dispatch }: ListProps) => {\n const onChange = (variant: VariantType) => {\n dispatch({ type: 'CHANGE_VARIANT', payload: variant })\n }\n return (\n \n
\n )\n}\nexport const IconVariant = () => {\n const { width } = useWindowSize()\n useEffect(() => {\n console.log(width)\n }, [width])\n const { state, dispatch } = useIconContext()\n // return \n \n {children}\n \n \n )\n}\n"
},
{
"path": "website/components/SelectedIcon.tsx",
"content": "import { ReactElement, useEffect, useRef, useState } from 'react'\nimport { renderToString } from 'react-dom/server'\nimport { saveAs } from 'file-saver'\nimport copy from 'copy-to-clipboard'\nimport canvg from 'canvg'\nimport gsap from 'gsap'\nimport { ClipboardText, CloseCircle, Import } from 'iconsax-reactjs'\nimport { useOnClickOutside } from '../hooks'\nimport { selectedStore, useIconContext } from '../store'\n\nconst duration = 300\nexport const SelectedIcon = () => {\n const { state } = useIconContext()\n const hideIcon = selectedStore((state) => state.hideIcon)\n const selected = selectedStore((state) => state.selected)\n const [isOpen, setIsOpen] = useState(!!selected || false)\n const ref = useRef(null)\n const iconRef = useRef(null)\n\n const Icon = selected?.Icon\n\n useEffect(() => {\n if (isOpen) {\n gsap.to(ref.current, {\n y: '0',\n ease: 'expo.inOUt',\n duration: duration / 1000,\n })\n }\n }, [isOpen])\n useEffect(() => {\n setIsOpen(!!selected)\n }, [selected])\n\n useOnClickOutside(ref, (e) => {\n const path = e.composedPath() as HTMLElement[]\n let isAnIcon = false\n\n for (let p = 0; p < path.length; p++) {\n if (path[p].classList && path[p].classList.contains('icon')) {\n return (isAnIcon = true)\n }\n }\n if (!isAnIcon) handleClose()\n })\n\n const handleClose = () => {\n if (!hideIcon) return\n gsap.to(ref.current, {\n y: '500',\n ease: 'expo.inOUt',\n duration: duration / 1000,\n })\n setTimeout(() => {\n hideIcon()\n }, duration)\n }\n const iconSaveName = `${selected?.name}-${state.variant}-${state.size}px`\n\n const iconString =\n Icon &&\n renderToString(\n \n \n {selected?.name} \n \n \n
\n \n
\n {Icon && (\n
\n
\n
(null)\n const { state } = useIconContext()\n const [copied, setCopied] = useState(false)\n\n const VariantProp =\n state.variant !== 'Linear' ? prop('variant', state.variant!) : []\n const SizeProp = state.size !== 24 ? prop('size', state.size!) : []\n\n const snip = [\n {\n text: '<',\n class: 'text-blue-300',\n },\n {\n text: `${name}`,\n class: 'text-yellow-400',\n },\n ...SizeProp,\n ...prop('color', state.color!),\n ...VariantProp,\n {\n text: '/>',\n class: 'text-blue-300',\n },\n ]\n const handleClick = () => {\n const res = snip.map((s) => s.text)\n copy(res.join(''))\n setCopied(true)\n setTimeout(() => {\n setCopied(false)\n }, 1000)\n\n // navigator.clipboard.writeText(res.join(''))\n }\n return (\n \n
handleClick()}\n className={`absolute bottom-2 right-2 ${\n copied ? 'bg-[#37d67a]' : 'bg-primary'\n } text-bg font-bold text-xs rounded-lg p-1 cursor-pointer`}\n >\n {copied ? 'copied!' : 'copy'}\n \n {snip.map((s, i) => (\n \n {`${s.text}${s.class.match(/-(green|yellow)-/) ? '\\n' : ''}`}\n \n ))}\n \n \n )\n}\n\ninterface IButton {\n name: string\n handleClick: () => void\n}\nconst Button = ({ name: _name, handleClick }: IButton) => {\n const { state } = useIconContext()\n const [copied, setCopied] = useState(false)\n const name = _name.split('#')\n const Icon = name[0] === 'download' ? Import : ClipboardText\n const onClickHandler = () => {\n if (name[0] === 'copy') {\n console.log('erfan khadivar hastam ')\n setCopied(true)\n setTimeout(() => {\n setCopied(false)\n }, 1000)\n }\n\n handleClick()\n }\n\n return (\n \n {copied ? 'copied!' : name[1]} \n \n )\n}\n"
},
{
"path": "website/components/Selector.tsx",
"content": "import { ArrowDown2 } from 'iconsax-reactjs'\nimport { useRef, useState } from 'react'\nimport { useOnClickOutside, useWindowSize } from '../hooks'\nimport { VariantType } from '../store/IconContext'\n\ntype OptionValue = VariantType | number\n\ntype OptionType = T\n\ninterface Props {\n options: OptionType[]\n label: string\n value: T\n onChange: (value: T) => void\n}\n\nexport const Selector = ({\n options,\n label,\n value,\n onChange,\n}: Props) => {\n const { width } = useWindowSize()\n const [isOpen, setIsOpen] = useState(false)\n const ref = useRef(null)\n\n useOnClickOutside(ref, () => setIsOpen(false))\n\n const handleChange = (op: T) => {\n setIsOpen(false)\n onChange(op)\n }\n return (\n \n
setIsOpen((prv) => !prv)}\n className=\"h-10 flex gap-4 bg-card justify-center items-center pl-3 pr-2 rounded-xl cursor-pointer\"\n >\n {width < 600 ? value : `${label}: ${value}`} \n \n {options.map((op) => (\n handleChange(op)}\n className=\"text-center cursor-pointer py-2 px-4\"\n >\n {op}\n \n ))}\n
\n )}\n \n )\n}\n"
},
{
"path": "website/components/index.ts",
"content": "export { Header } from './Header'\nexport { Selector } from './Selector'\nexport { IconItem } from './IconItem'\nexport { IconCustomizer } from './IconCustomizer'\nexport { IconList } from './IconList'\nexport { RainbowButton } from './RainbowButton'\nexport { IconColor } from './IconColor'\nexport { IconVariant } from './IconVariant'\nexport { IconSize } from './IconSize'\nexport { IconSearch } from './IconSearch'\nexport { SelectedIcon } from './SelectedIcon'\n"
},
{
"path": "website/hooks/index.ts",
"content": "export { useDebounce } from './useDebounce'\nexport { useOnClickOutside } from './useOnClickOutside'\nexport { useWindowSize } from './useWindowSize'\n"
},
{
"path": "website/hooks/useDebounce.ts",
"content": "import { DependencyList, useEffect } from 'react';\nimport useTimeoutFn from './useTimeoutFn';\n\nexport type UseDebounceReturn = [() => boolean | null, () => void];\n\nexport function useDebounce(\n fn: Function,\n ms: number = 0,\n deps: DependencyList = []\n): UseDebounceReturn {\n const [isReady, cancel, reset] = useTimeoutFn(fn, ms);\n\n useEffect(reset, deps);\n\n return [isReady, cancel];\n}\n"
},
{
"path": "website/hooks/useOnClickOutside.ts",
"content": "import { RefObject, useEffect } from 'react'\n\ntype AnyEvent = MouseEvent | TouchEvent\n\nexport function useOnClickOutside(\n ref: RefObject,\n handler: (event: AnyEvent) => void\n): void {\n useEffect(() => {\n const listener = (event: AnyEvent) => {\n const el = ref?.current\n\n // Do nothing if clicking ref's element or descendent elements\n if (!el || el.contains(event.target as Node)) {\n return\n }\n\n handler(event)\n }\n\n document.addEventListener(`mousedown`, listener)\n document.addEventListener(`touchstart`, listener)\n\n return () => {\n document.removeEventListener(`mousedown`, listener)\n document.removeEventListener(`touchstart`, listener)\n }\n\n // Reload only if ref or handler changes\n }, [ref, handler])\n}\n"
},
{
"path": "website/hooks/useTimeoutFn.ts",
"content": "import { useCallback, useEffect, useRef } from 'react';\n\nexport type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];\n\nexport default function useTimeoutFn(fn: Function, ms: number = 0): UseTimeoutFnReturn {\n const ready = useRef(false);\n const timeout = useRef>();\n const callback = useRef(fn);\n\n const isReady = useCallback(() => ready.current, []);\n\n const set = useCallback(() => {\n ready.current = false;\n timeout.current && clearTimeout(timeout.current);\n\n timeout.current = setTimeout(() => {\n ready.current = true;\n callback.current();\n }, ms);\n }, [ms]);\n\n const clear = useCallback(() => {\n ready.current = null;\n timeout.current && clearTimeout(timeout.current);\n }, []);\n\n // update ref when function changes\n useEffect(() => {\n callback.current = fn;\n }, [fn]);\n\n // set on mount, clear on unmount\n useEffect(() => {\n set();\n\n return clear;\n }, [ms]);\n\n return [isReady, clear, set];\n}\n"
},
{
"path": "website/hooks/useWindowSize.ts",
"content": "import { useEffect, useState } from 'react'\n\ninterface WindowSize {\n width: number\n height: number\n}\n\nexport const useWindowSize = (): WindowSize => {\n const [windowSize, setWindowSize] = useState({\n width: 0,\n height: 0,\n })\n\n useEffect(() => {\n const handler = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n })\n }\n\n // Set size at the first client-side load\n handler()\n\n window.addEventListener('resize', handler)\n\n // Remove event listener on cleanup\n return () => {\n window.removeEventListener('resize', handler)\n }\n }, [])\n\n return windowSize\n}\n"
},
{
"path": "website/lib/icons.ts",
"content": "import * as Icons from 'iconsax-reactjs'\nimport { Icon } from 'iconsax-reactjs'\n\ntype iconType = keyof typeof Icons\n\nexport interface IIconsArray {\n name: string\n Icon: Icon\n}\nconst iconsArray: IIconsArray[] = []\nfor (const [name, Icon] of Object.entries(Icons)) {\n iconsArray.push({ name, Icon })\n}\n\nexport default iconsArray\n"
},
{
"path": "website/next-env.d.ts",
"content": "/// \n \n
\n \n) {\n res.status(200).json({ name: 'John Doe' })\n}\n"
},
{
"path": "website/pages/index.tsx",
"content": "import type { NextPage } from 'next'\nimport Head from 'next/head'\nimport { Header } from '../components'\nimport { IconContainer } from '../Containers/IconContainer'\n\nconst Home: NextPage = () => {\n return (\n \n \n
Iconsax React \n \n \n \n \n #da532c \n \n \n \n"
},
{
"path": "website/public/site.webmanifest",
"content": "{\n \"name\": \"\",\n \"short_name\": \"\",\n \"icons\": [\n {\n \"src\": \"/android-chrome-96x96.png\",\n \"sizes\": \"96x96\",\n \"type\": \"image/png\"\n }\n ],\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\",\n \"display\": \"standalone\"\n}\n"
},
{
"path": "website/store/IconContext.tsx",
"content": "import { createContext, useContext, Dispatch, FC, useReducer } from 'react'\nimport IconReducer, { IconAction } from './iconReducer'\n\nexport const Variants = [\n 'Linear',\n 'Outline',\n 'Bold',\n 'Bulk',\n 'Broken',\n 'TwoTone',\n] as const\n\nexport type VariantType = typeof Variants[number] | undefined\n\nexport interface IconState {\n search: string\n size: number\n color: string\n variant: VariantType\n}\n\nconst initialValue: IconState = {\n search: '',\n size: 32,\n color: '#FF8A65',\n variant: 'Linear',\n}\nconst Context = createContext<{\n state: IconState\n dispatch: Dispatch\n}>({\n state: initialValue,\n dispatch: () => undefined,\n})\nexport const useIconContext = () => useContext(Context)\n\nconst IconContext: FC = ({ children }) => {\n const [state, dispatch] = useReducer(IconReducer, initialValue)\n\n return (\n {children} \n )\n}\n\nexport default IconContext\n"
},
{
"path": "website/store/iconReducer.ts",
"content": "import { IconState, VariantType } from './IconContext'\n\nexport type IconAction =\n | { type: 'SEARCH'; payload: string }\n | { type: 'CHANGE_VARIANT'; payload: VariantType }\n | { type: 'CHANGE_SIZE'; payload: number }\n | { type: 'CHANGE_COLOR'; payload: string }\n\nconst IconReducer = (state: IconState, action: IconAction) => {\n switch (action.type) {\n case 'SEARCH':\n return { ...state, search: action.payload }\n case 'CHANGE_VARIANT':\n return { ...state, variant: action.payload }\n case 'CHANGE_COLOR':\n return { ...state, color: action.payload }\n case 'CHANGE_SIZE':\n return { ...state, size: action.payload }\n\n default:\n return state\n }\n}\n\nexport default IconReducer\n"
},
{
"path": "website/store/index.ts",
"content": "export { default as IconContext, useIconContext, Variants } from './IconContext'\nexport { searchStore } from './searchState'\nexport { selectedStore } from './selectedStore'\n"
},
{
"path": "website/store/searchState.ts",
"content": "import create from 'zustand'\n\ninterface Search {\n query: string\n setQuery: (query: string) => void\n}\n\nexport const searchStore = create((set) => ({\n query: '',\n setQuery: (query) => set({ query }),\n}))\n"
},
{
"path": "website/store/selectedStore.ts",
"content": "import { IIconsArray } from '../lib/icons'\nimport create from 'zustand'\n\ninterface SelectedState {\n selected: IIconsArray | null\n showIcon: (Icon: IIconsArray) => void\n hideIcon: () => void\n}\n\nexport const selectedStore = create((set) => ({\n selected: null,\n showIcon: (Icon) => set({ selected: Icon }),\n hideIcon: () => set({ selected: null }),\n}))\n"
},
{
"path": "website/styles/globals.css",
"content": "@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n*,\n*:active,\n*:focus {\n outline: none;\n box-sizing: border-box;\n}\nhtml,\nbody {\n background-color: #0f0f0f;\n}\n.btn .rainbow {\n /* padding: 2px; */\n filter: blur(6px);\n background: conic-gradient(\n #ff2e4e,\n #d960ff,\n #9264ff,\n #00b3f0,\n #06cd69,\n #ffcd00,\n #ff5c22,\n #ff2e4e\n );\n}\n.btn .child {\n text-shadow: 0px 0px 9px rgb(0 0 0 / 62%);\n}\n\n.toolbar {\n position: -webkit-sticky;\n position: sticky;\n top: -1px;\n z-index: 1;\n}\n"
},
{
"path": "website/tailwind.config.js",
"content": "module.exports = {\n mode: 'jit',\n purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],\n theme: {\n fontFamily: {\n sans: ['Poppins', 'sans-serif'],\n },\n extend: {\n screens: {\n xs: '365px',\n },\n zIndex: {\n '-1': '-1',\n },\n colors: {\n // primary: 'rgba(139, 92, 246)',\n primary: '#FF8A65',\n bg: '#0F0F0F',\n card: '#151515',\n border: '#1d1d1d',\n },\n boxShadow: {\n primary: '0 10px 30px rgb(0 0 0 / 8%)',\n },\n },\n },\n variants: {\n extend: {},\n },\n plugins: [],\n}\n"
},
{
"path": "website/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n \"exclude\": [\"node_modules\"]\n}\n"
}
]