Merge pull request #119 from Iconscout/feature/is-3174-ts-support-in-…

…react-unicons-repo

feat: added TS support and related changes

.github/workflows/npm-publish-pro.yml

@@ -3,7 +3,7 @@ name: Publish to NPM PRO
 on:
   push:
     tags:
-      - "*"
+      - '*'
 
 jobs:
   publish-npm:
@@ -21,7 +21,7 @@ jobs:
         run: |
           npm ci --progress=false
           npm i @iconscout/unicons@latest
-          npm run generate
+          npm run generate && npm run build
       - name: Publish to Gemfury
         run: npm publish
         env:

.github/workflows/npm-publish-rc.yml

@@ -3,7 +3,7 @@ name: Publish to NPM RC
 on:
   push:
     branches:
-      - "release-*"
+      - 'release-*'
 
 jobs:
   publish-npm:
@@ -13,9 +13,9 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 22.11.0
-          registry-url: "https://registry.npmjs.org"
+          registry-url: 'https://registry.npmjs.org'
       - name: Download & Build Icons
-        run: npm ci --progress=false && npm i @iconscout/unicons@latest && npm run generate
+        run: npm ci --progress=false && npm i @iconscout/unicons@latest && npm run generate && npm run build
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v7
         with:

.github/workflows/npm-publish.yml

@@ -3,7 +3,7 @@ name: Publish to NPM
 on:
   push:
     tags:
-      - "*"
+      - '*'
 
 jobs:
   publish-npm:
@@ -13,9 +13,9 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 22.11.0
-          registry-url: "https://registry.npmjs.org"
+          registry-url: 'https://registry.npmjs.org'
       - name: Download & Build Icons
-        run: npm ci --progress=false && npm i @iconscout/unicons@latest && npm run generate
+        run: npm ci --progress=false && npm i @iconscout/unicons@latest && npm run generate && npm run build
       - name: Publish to NPM
         run: npm publish
         env:

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-lib
+lib
+dist
+.DS_Store

README.md

@@ -1,64 +1,120 @@
 # React Unicons
 
-
 4,500+ Pixel-perfect vector icons as React Components. These icons are designed by [IconScout](https://iconscout.com).
 
-## Getting Started
-You can easily install [react-unicons](https://iconscout.com/unicons) using npm.
+## Installation
+
+Using npm:
+
 ```bash
 npm install --save @iconscout/react-unicons
 ```
-Or using `yarn`
+
+Using yarn:
+
 ```bash
 yarn add @iconscout/react-unicons
 ```
 
 ## Usage
-### Use individual icons
-```js
-import React from 'react';
+
+### Individual Icon Import (Recommended)
+
+```jsx
 import UilReact from '@iconscout/react-unicons/icons/uil-react'
 
-const App = () => {
-  return <UilReact size="140" color="#61DAFB" />
-};
+function App() {
+  return <UilReact size={140} color="#61DAFB" />
+}
+```
 
-export default App;
-````
+### Import as a Full Package
 
-You can customize icons as below:
-```html
-<Unicons.UilReact size="140" color="#61DAFB" />
+```jsx
+import { UilReact } from '@iconscout/react-unicons'
+
+function App() {
+  return <UilReact size={140} color="#61DAFB" />
+}
+```
+
+### Import All Icons
+
+```jsx
+import \* as Unicons from '@iconscout/react-unicons'
+
+function App() {
+return <Unicons.UilReact size={140} color="#61DAFB" />
+}
+```
+
+## TypeScript Support
+
+The library includes built-in TypeScript type definitions. All icons come with full type support, providing proper type checking for props and better IDE integration. The `IconProps` type is exported from the package for use in custom components.
+
+## Props
+
+The icons accept all props that you can pass to a SVG element, plus:
+
+| Prop    | Type               | Default        | Description         |
+| ------- | ------------------ | -------------- | ------------------- |
+| `size`  | `number \| string` | `24`           | Icon size in pixels |
+| `color` | `string`           | `currentColor` | Icon color          |
+
+## Examples
+
+### Basic Usage
+
+```jsx
+<UilReact /> // Default size (24px) and color
 ```
 
-### Usage as full Package
-```js
-import React from 'react';
-import * as Unicons from '@iconscout/react-unicons';
+### With Size
+
+```jsx
+<UilReact size={60} /> // As number
+<UilReact size="60" /> // As string
+```
 
-const App = () => {
-  return <Unicons.UilReact />
-};
+### With Color
 
-export default App;
-````
+```jsx
+<UilReact color="#61DAFB" /> // Hex color
+<UilReact color="rgb(0,0,0)" /> // RGB
+<UilReact color="red" /> // Named color
+```
 
-### More ways
-- [React-native-unicons](https://github.com/Iconscout/react-native-unicons)
+### With Other Props
+
+```jsx
+<UilReact
+  size={140}
+  color="#61DAFB"
+  className="my-icon"
+  style={{ margin: '10px' }}
+/>
+```
+
+## Related Projects
+
+- [React Native Unicons](https://github.com/Iconscout/react-native-unicons)
 - [Vue-unicons](https://github.com/antonreshetov/vue-unicons) by [Anton Reshetov](https://github.com/antonreshetov)
 - [Vector SVGs](https://iconscout.com/unicons)
 - [Icon Font](https://github.com/Iconscout/unicons)
 
 ## Contributing
-We will be happy to have community support for Unicons. Feel free to fork and create pull requests. We have given a small roadmap above so that you can help us build these features.
 
-### Request icons
-Can't find the icon you are looking for? No worries, we will design it for you. And we'll be happy to design them in upcoming weeks.
+We welcome community contributions to Unicons. Feel free to create pull requests.
 
+### Request New Icons
+
+Can't find an icon? Request it here:
 [Request Icon](mailto:support@iconscout.com)
 
 ## License
+
 Unicons are Open Source icons and licensed under [IconScout Simple License](https://iconscout.com/licenses#simple_license). You're free to use these icons in your personal and commercial project. We would love to see the attribution in your app's **about** screen, but it's not mandatory.
+
 ```html
 React Unicons by <a href="https://iconscout.com/">IconScout</a>
-```
+```

build/generate.js

@@ -1,60 +1,95 @@
 const path = require('path')
-const fs = require('fs-plus')
+const fs = require('fs-extra')
 const cheerio = require('cheerio')
 const upperCamelCase = require('uppercamelcase')
 
-const iconsComponentPath = path.join(process.cwd(), 'icons')
-const iconsIndexPath = path.join(process.cwd(), 'index.js')
+// Ensure the src directory exists
+const srcPath = path.join(process.cwd(), 'src')
+
+fs.removeSync(srcPath)
+fs.mkdirSync(srcPath)
+
+const iconsPath = path.join(srcPath, 'icons') // Single directory for all icons
+const iconsIndexPath = path.join(srcPath, 'index.ts')
 const uniconsConfig = require('@iconscout/unicons/json/line.json')
 
 // Clear Directories
-fs.removeSync(iconsComponentPath)
-fs.mkdirSync(iconsComponentPath)
+fs.removeSync(iconsPath)
+fs.mkdirSync(iconsPath)
 
-const indexJs = []
+const indexTs = [
+  `import { SVGProps } from 'react'
 
-uniconsConfig.forEach(icon => {
-  const baseName = `uil-${icon.name}`
-  const location = path.join(iconsComponentPath, `${baseName}.js`)
-  const name = upperCamelCase(baseName)
-  const svgFile = fs.readFileSync(path.resolve('node_modules/@iconscout/unicons', icon.svg), 'utf-8')
+export interface IconProps extends SVGProps<SVGElement> {
+  size?: string | number
+  color?: string
+}
+`,
+]
 
-  let data = svgFile.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
-  // Get Path Content from SVG
-  const $ = cheerio.load(data, {
-    xmlMode: true
-  })
-  const svgPath = $('path').attr('d')
+try {
+  uniconsConfig.forEach((icon) => {
+    const baseName = `uil-${icon.name}`
+    const name = upperCamelCase(baseName)
+
+    try {
+      const svgFile = fs.readFileSync(
+        path.resolve('node_modules/@iconscout/unicons', icon.svg),
+        'utf-8'
+      )
 
-  const template = `import React from 'react';
-import PropTypes from 'prop-types';
+      let data = svgFile.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
 
-const ${name} = ({ color = 'currentColor', size = '24', ...otherProps }) => {
-  return React.createElement('svg', {
-    xmlns: 'http://www.w3.org/2000/svg',
-    width: size,
-    height: size,
-    viewBox: '0 0 24 24',
-    fill: color,
-    ...otherProps
-  }, React.createElement('path', {
-    d: '${svgPath}'
-  }));
-};
+      const $ = cheerio.load(data, {
+        xmlMode: true,
+      })
+      const svgPath = $('path').attr('d')
 
-${name}.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
+      if (!svgPath) {
+        console.warn(`Warning: No path found for icon ${name}`)
+        return
+      }
 
-export default ${name};`
+      const componentContent = `import * as React from 'react'
+import { IconProps } from '../index'
 
-  fs.writeFileSync(location, template, 'utf-8')
+const ${name} = ({
+  color = 'currentColor',
+  size = 24,
+  ...props
+}: IconProps) => {
+  return React.createElement(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      viewBox: '0 0 24 24',
+      width: size,
+      height: size,
+      fill: color,
+      ...props
+    },
+    React.createElement('path', {
+      d: '${svgPath}'
+    })
+  )
+}
 
-  // Add it to index.js
-  indexJs.push(`export { default as ${name} } from './icons/${baseName}'`)
-})
+export default ${name}`
+
+      // Write file once
+      fs.writeFileSync(path.join(iconsPath, `${baseName}.ts`), componentContent)
+
+      // Add to main index exports
+      indexTs.push(`export { default as ${name} } from './icons/${baseName}'`)
+    } catch (err) {
+      console.error(`Error processing icon ${name}:`, err)
+    }
+  })
 
-fs.writeFileSync(iconsIndexPath, indexJs.join('\n'), 'utf-8')
+  fs.writeFileSync(iconsIndexPath, indexTs.join('\n'), 'utf-8')
 
-console.log(`Generated ${uniconsConfig.length} icon components.`)
+  console.log(`✓ Generated ${uniconsConfig.length} icon components`)
+} catch (err) {
+  console.error('Error during generation:', err)
+  process.exit(1)
+}

example-react-18/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example-react-18/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh