React Unicons

repository·master·Indexed 43 days ago

https://github.com/iconscout/react-unicons

A library providing over 4,500 pixel-perfect vector icons as ready-to-use React components. Version 2.2.5 allows for individual icon imports to minimize bundle size or full package imports, with support for size and color customization via props.

Tokens: 2.6K
Snippets: 10
Records: 10
Agent score: 55%

What's inside React Unicons

Customize Unicons props
master
Icons can be customized using size and color props. When using the full package import pattern, you access them through the namespace object.
```
<Unicons.UilReact size="140" color="#61DAFB" />
```
https://github.com/iconscout/react-unicons/blob/master/README.md
Build the application for production
master
To prepare your application for deployment, run npm run build. This command creates a build folder containing the production-ready assets. It bundles React in production mode, optimizes the build for performance, minifies files, and includes hashes in filenames for cache busting.
```
npm run build
```
https://github.com/iconscout/react-unicons/blob/master/example/README.md
Manage the example project with npm scripts
master
The react-unicons-try example project is bootstrapped with Create React App and provides several scripts for development, testing, and production builds. Use these commands in your project directory to manage the application lifecycle.
```
# Run the app in development mode
npm start

# Run tests in interactive watch mode
npm test

# Build the app for production
npm run build

# Eject the configuration (one-way operation)
npm run eject
```
https://github.com/iconscout/react-unicons/blob/master/example/README.md
Eject from Create React App configuration
master
If you need full control over the underlying build tools (Webpack, Babel, ESLint, etc.), you can run npm run eject.
Warning: This is a one-way operation. Once you eject, you cannot go back.
Running this command will remove the single build dependency and copy all configuration files and transitive dependencies directly into your project. After ejecting, you are responsible for maintaining these configurations.
```
npm run eject
```
https://github.com/iconscout/react-unicons/blob/master/example/README.md
Install @iconscout/react-unicons
master
You can install the React Unicons package using npm or yarn to access over 4,500 pixel-perfect vector icons as React components.
```
npm install --save @iconscout/react-unicons
```
or
```
yarn add @iconscout/react-unicons
```
https://github.com/iconscout/react-unicons/blob/master/README.md
Use Unicons as a full package
master
You can import the entire library as a single namespace. This allows you to access all icons via the Unicons object.
```
import React from 'react';
import * as Unicons from '@iconscout/react-unicons';

const App = () => {
  return <Unicons.UilReact />
};

export default App;
```
https://github.com/iconscout/react-unicons/blob/master/README.md
Use individual icons
master
To minimize bundle size, you can import specific icons directly from their individual file paths. Each icon is available as a React component that accepts size and color props for customization.
```
import React from 'react';
import UilReact from '@iconscout/react-unicons/icons/uil-react'

const App = () => {
  return <UilReact size="140" color="#61DAFB" />
};

export default App;
```
https://github.com/iconscout/react-unicons/blob/master/README.md
Import Unicons React components
master
The react-unicons library exports a large collection of individual React components, each representing a specific icon. Icons are exported using the Uil prefix followed by the icon name (e.g., UilAbacus, UilApple, UilCheck). You can import these components directly from the main entrypoint.
Note: This segment of the entrypoint contains a subset of the total available icons. Each icon is a default export from its respective file within the ./icons/ directory.
```
import {
  UilAbacus,
  UilApple,
  UilCheck,
  UilCloud,
  UilFile
} from 'react-unicons';

function MyComponent() {
  return (
    <div>
      <UilAbacus />
      <UilApple />
      <UilCheck />
      <UilCloud />
      <UilFile />
    </div>
  );
}
```
https://github.com/iconscout/react-unicons/blob/master/index.js

Reference Unicon component names

master

The following is a partial list of available Unicon components exported by the library. All components follow the Uil[Name] pattern.

// Examples of exported components:
UilTennisBall
UilText
UilTextFields
UilTextSize
UilTextStrikeThrough
UilTh
UilThLarge
UilThSlash
UilThermometer
UilThumbsDown
UilThumbsUp
UilThunderstorm
UilThunderstormMoon
UilThunderstormSun
UilTicket
UilTimes
UilTimesCircle
UilTimesSquare
UilToggleOff
UilToggleOn
UilToiletPaper
UilTopArrowFromTop
UilTopArrowToTop
UilTornado
UilTrademark
UilTrademarkCircle
UilTrafficBarrier
UilTrafficLight
UilTransaction
UilTrash
UilTrashAlt
UilTrees
UilTriangle
UilTrophy
UilTrowel
UilTruck
UilTruckLoading
UilTumblr
UilTumblrAlt
UilTumblrSquare
UilTvRetro
UilTvRetroSlash
UilTwitter
UilTwitterAlt
UilUmbrella
UilUnamused
UilUnderline
UilUniversity
UilUnlock
UilUnlockAlt
UilUpload
UilUploadAlt
UilUsdCircle
UilUsdSquare
UilUser
UilUserArrows
UilUserCheck
UilUserCircle
UilUserExclamation
UilUserLocation
UilUserMd
UilUserMinus
UilUserNurse
UilUserPlus
UilUserSquare
UilUserTimes
UilUsersAlt
UilUtensils
UilUtensilsAlt
UilVectorSquare
UilVectorSquareAlt
UilVenus
UilVerticalAlignBottom
UilVerticalAlignCenter
UilVerticalAlignTop
UilVerticalDistributeBottom
UilVerticalDistributionCenter
UilVerticalDistributionTop
UilVideo
UilVideoQuestion
UilVideoSlash
UilVirusSlash
UilVisualStudio
UilVk
UilVkAlt
UilVoicemail
UilVoicemailRectangle
UilVolleyball
UilVolume
UilVolumeDown
UilVolumeMute
UilVolumeOff
UilVolumeUp
UilVuejs
UilVuejsAlt
UilWall
UilWallet
UilWatch
UilWatchAlt
UilWater
UilWaterDropSlash
UilWaterGlass
UilWebGrid
UilWebGridAlt
UilWebSection
UilWebSectionAlt
UilWebcam
UilWeight
UilWhatsapp
UilWhatsappAlt
UilWheelBarrow
UilWheelchair
UilWheelchairAlt
UilWifi
UilWifiRouter
UilWifiSlash
UilWind
UilWindMoon
UilWindSun
UilWindow
UilWindowGrid
UilWindowMaximize
UilWindowRestore
UilWindowSection
UilWindows
UilWindsock
UilWindy
UilWordpress
UilWordpressSimple
UilWrapText
UilWrench
UilX
UilXAdd
UilYen
UilYenCircle
UilYinYang
UilYoutube

Reference list of exported Unicons

master

The following is a partial list of the icon components exported by the library. Use these names to import specific icons into your React application.

// Examples of exported components:
export { default as UilFileTimesAlt } from './icons/uil-file-times-alt'
export { default as UilFileUpload } from './icons/uil-file-upload'
export { default as UilFilesLandscapes } from './icons/uil-files-landscapes'
export { default as UilFilter } from './icons/uil-filter'
export { default as UilFolder } from './icons/uil-folder'
export { default as UilGithub } from './icons/uil-github'
export { default as UilGoogle } from './icons/uil-google'
export { default as UilHeart } from './icons/uil-heart'
export { default as UilHome } from './icons/uil-home'
export { default as UilImage } from './icons/uil-image'
export { default as UilJavaScript } from './icons/uil-java-script'
export { default as UilLock } from './icons/uil-lock'
export { default as UilMapPin } from './icons/uil-map-pin'
export { default as UilSearch } from './icons/uil-search'
export { default as UilSettings } from './icons/uil-setting'
export { default as UilStar } from './icons/uil-star'
// ... and many more