mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-07 18:23:04 +00:00
merge new into master
This commit is contained in:
581
node_modules/@nsmr/pixelart-react/README.md
generated
vendored
Normal file
581
node_modules/@nsmr/pixelart-react/README.md
generated
vendored
Normal file
@@ -0,0 +1,581 @@
|
||||
# Pixelarticons React
|
||||
|
||||
|
||||
|
||||
React components for [pixelarticons](https://github.com/halfmage/pixelarticons).
|
||||
|
||||
## Icon Gallery
|
||||
|
||||
<p align="center">
|
||||
<img src="./examples/icon-gallery.png" alt="Pixelarticons Gallery" width="800" />
|
||||
</p>
|
||||
|
||||
**New!** [View the full interactive gallery with all 486 icons](https://gitntg.github.io/pixelarticons-react/examples/gallery-generator.html)
|
||||
|
||||
## 🚨 Version 2.0.0 Migration Guide 🚨
|
||||
|
||||
The package includes several improvements in version 2.0.0:
|
||||
|
||||
- Interactive gallery with all 486 icons
|
||||
- Improved documentation
|
||||
- Better React component support
|
||||
- Enhanced build process
|
||||
|
||||
### Migration Steps:
|
||||
|
||||
1. Update your package.json dependency:
|
||||
|
||||
```diff
|
||||
- "@nicholuassommer/pixelarticons-react": "^1.0.1"
|
||||
+ "@nsmr/pixelart-react": "^2.0.0"
|
||||
```
|
||||
|
||||
2. Update your imports:
|
||||
|
||||
#### Previous import style:
|
||||
|
||||
```jsx
|
||||
import { User, Heart } from "@nicholuassommer/pixelarticons-react";
|
||||
```
|
||||
|
||||
#### New import options:
|
||||
|
||||
```jsx
|
||||
// Option 1: Direct from package (similar to before)
|
||||
import { User, Heart } from "@nsmr/pixelart-react";
|
||||
|
||||
// Option 2: New shorter path
|
||||
import { User, Heart } from "pixelart/react";
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @nsmr/pixelart-react
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Direct Import
|
||||
|
||||
```jsx
|
||||
import { User, Heart, ArrowRight } from "pixelart/react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<User size={24} />
|
||||
<Heart size={24} />
|
||||
<ArrowRight size={24} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Using Icon Component
|
||||
|
||||
```jsx
|
||||
import { Icon } from "pixelart/react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<Icon name="user" size={24} />
|
||||
<Icon name="heart" size={24} />
|
||||
<Icon name="arrow-right" size={24} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Icon Props
|
||||
|
||||
All icons accept the following props:
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| --------- | ---------------- | ------- | --------------------------------------------- |
|
||||
| size | number \| string | 24 | Width and height of the icon |
|
||||
| className | string | '' | Additional CSS classes |
|
||||
| ... | SVGProps | | All other props are passed to the SVG element |
|
||||
|
||||
## Available Icons
|
||||
|
||||
Here's a complete list of all available icons:
|
||||
|
||||
### Icons Starting with Numbers (require special syntax)
|
||||
|
||||
For icons starting with numbers, you can either use the component name with "Icon" prefix or use the original name with the `Icon` component:
|
||||
|
||||
```jsx
|
||||
// Direct import
|
||||
import { Icon4g } from "pixelart/react";
|
||||
|
||||
// Or using the Icon component
|
||||
<Icon name="4g" />;
|
||||
```
|
||||
|
||||
- `Icon4g` (or `<Icon name="4g" />`)
|
||||
- `Icon4k` (or `<Icon name="4k" />`)
|
||||
- `Icon4kBox` (or `<Icon name="4k-box" />`)
|
||||
- `Icon5g` (or `<Icon name="5g" />`)
|
||||
|
||||
### Complete Icon List
|
||||
|
||||
Here's an alphabetical list of all available icon components:
|
||||
|
||||
- AbTesting
|
||||
- Ac
|
||||
- AddBoxMultiple
|
||||
- AddBox
|
||||
- AddCol
|
||||
- AddGrid
|
||||
- AddRow
|
||||
- Alert
|
||||
- AlignCenter
|
||||
- AlignJustify
|
||||
- AlignLeft
|
||||
- AlignRight
|
||||
- Analytics
|
||||
- Anchor
|
||||
- Android
|
||||
- Animation
|
||||
- Archive
|
||||
- ArrowBarDown
|
||||
- ArrowBarLeft
|
||||
- ArrowBarRight
|
||||
- ArrowBarUp
|
||||
- ArrowDownBox
|
||||
- ArrowDown
|
||||
- ArrowLeftBox
|
||||
- ArrowLeft
|
||||
- ArrowRightBox
|
||||
- ArrowRight
|
||||
- ArrowUpBox
|
||||
- ArrowUp
|
||||
- ArrowsHorizontal
|
||||
- ArrowsVertical
|
||||
- ArtText
|
||||
- ArticleMultiple
|
||||
- Article
|
||||
- AspectRatio
|
||||
- At
|
||||
- Attachment
|
||||
- AudioDevice
|
||||
- Backspace
|
||||
- BagAlt
|
||||
- Bag
|
||||
- Bank
|
||||
- BarcodeAlt
|
||||
- Barcode
|
||||
- Basketball
|
||||
- Bath
|
||||
- Battery0
|
||||
- Battery1
|
||||
- Battery2
|
||||
- Battery3
|
||||
- BatteryCharging
|
||||
- Beaker
|
||||
- BedDouble
|
||||
- BedSingle
|
||||
- Bell
|
||||
- Bitcoin
|
||||
- Bluetooth
|
||||
- Bold
|
||||
- BookAlt
|
||||
- Book
|
||||
- Bookmark
|
||||
- BorderAll
|
||||
- BorderBottom
|
||||
- BorderHorizontal
|
||||
- BorderInner
|
||||
- BorderLeft
|
||||
- BorderNone
|
||||
- BorderOuter
|
||||
- BorderRight
|
||||
- BorderStyle
|
||||
- BorderTop
|
||||
- BorderVertical
|
||||
- Bot
|
||||
- Bowl
|
||||
- Box
|
||||
- Boy
|
||||
- Braces
|
||||
- Brackets
|
||||
- Brain
|
||||
- Briefcase
|
||||
- Broom
|
||||
- Browser
|
||||
- Brush
|
||||
- Bug
|
||||
- Building
|
||||
- BulbOff
|
||||
- Bulb
|
||||
- Button
|
||||
- Cake
|
||||
- Calculator
|
||||
- CalendarAlt
|
||||
- Calendar
|
||||
- Camera
|
||||
- Car
|
||||
- Caret
|
||||
- Cast
|
||||
- Chain
|
||||
- Chat
|
||||
- CheckBox
|
||||
- CheckDouble
|
||||
- Check
|
||||
- Chess
|
||||
- ChevronDown
|
||||
- ChevronLeft
|
||||
- ChevronRight
|
||||
- ChevronUp
|
||||
- Chip
|
||||
- Clipboard
|
||||
- ClockAlt
|
||||
- Clock
|
||||
- Cloud
|
||||
- Code
|
||||
- CodepenAlt
|
||||
- Codepen
|
||||
- Cog
|
||||
- ColorPicker
|
||||
- Colors
|
||||
- Columns
|
||||
- Command
|
||||
- Compass
|
||||
- Contacts
|
||||
- Contract
|
||||
- Cookie
|
||||
- Copy
|
||||
- CornerDownLeft
|
||||
- CornerDownRight
|
||||
- CornerLeftDown
|
||||
- CornerLeftUp
|
||||
- CornerRightDown
|
||||
- CornerRightUp
|
||||
- CornerUpLeft
|
||||
- CornerUpRight
|
||||
- CpuAlt
|
||||
- Cpu
|
||||
- CreditCard
|
||||
- Crop
|
||||
- Cross
|
||||
- Crosshair
|
||||
- Cube
|
||||
- CurlyBraces
|
||||
- Currency
|
||||
- Dashboard
|
||||
- Database
|
||||
- Deletion
|
||||
- Delimiter
|
||||
- Deviantart
|
||||
- Devices
|
||||
- Diamond
|
||||
- Direction
|
||||
- Discord
|
||||
- Dish
|
||||
- Divide
|
||||
- Dna
|
||||
- Dock
|
||||
- Document
|
||||
- Documents
|
||||
- DonutChart
|
||||
- Door
|
||||
- DotGrid
|
||||
- DotsMidsplit
|
||||
- Dots
|
||||
- Download
|
||||
- Drag
|
||||
- DragAlt
|
||||
- Dribbble
|
||||
- Drink
|
||||
- DropInvert
|
||||
- Drop
|
||||
- Duplicate
|
||||
- Enter
|
||||
- Envelope
|
||||
- Equalizer
|
||||
- EraserAlt
|
||||
- Eraser
|
||||
- Exchange
|
||||
- Exclude
|
||||
- ExpandAlt
|
||||
- Expand
|
||||
- Extension
|
||||
- Eye
|
||||
- EyeAlt
|
||||
- Feather
|
||||
- Female
|
||||
- File
|
||||
- FilmStack
|
||||
- Film
|
||||
- FilterAlt
|
||||
- Filter
|
||||
- Fingerprint
|
||||
- FlagAlt
|
||||
- Flag
|
||||
- FolderAdd
|
||||
- Folder
|
||||
- Font
|
||||
- Fork
|
||||
- Fountain
|
||||
- Gamepad
|
||||
- Gatsbyjs
|
||||
- Gesture
|
||||
- Gift
|
||||
- Girl
|
||||
- Git
|
||||
- GithubAlt
|
||||
- Github
|
||||
- Gitlab
|
||||
- Globe
|
||||
- Google
|
||||
- Graphql
|
||||
- Grid
|
||||
- GroupAdd
|
||||
- Group
|
||||
- Guitar
|
||||
- Hash
|
||||
- Hashtag
|
||||
- Headphones
|
||||
- Heart
|
||||
- HeartFilled
|
||||
- HeartRate
|
||||
- History
|
||||
- Home
|
||||
- Hourglass
|
||||
- House
|
||||
- Id
|
||||
- Image
|
||||
- Import
|
||||
- Inclination
|
||||
- Infinity
|
||||
- Info
|
||||
- Injection
|
||||
- Instagram
|
||||
- Intersect
|
||||
- IosFillet
|
||||
- IosRadio
|
||||
- IosSwitch
|
||||
- Italic
|
||||
- Jpg
|
||||
- Key
|
||||
- Keyboard
|
||||
- KeyboardAlt
|
||||
- Keyhole
|
||||
- Laptop
|
||||
- Lastfm
|
||||
- LassoVectorSelection
|
||||
- LassoVectorSelect
|
||||
- Layer
|
||||
- Layout
|
||||
- Leaf
|
||||
- Library
|
||||
- License
|
||||
- Lifebuoy
|
||||
- Lightbulb
|
||||
- LineSpace
|
||||
- Link
|
||||
- Linkedin
|
||||
- Linux
|
||||
- ListAdd
|
||||
- ListBox
|
||||
- ListMinus
|
||||
- List
|
||||
- Litecoin
|
||||
- Loader
|
||||
- Loading
|
||||
- Location
|
||||
- LockOpen
|
||||
- Lock
|
||||
- Log
|
||||
- LogicAnd
|
||||
- LogicOr
|
||||
- Login
|
||||
- Logout
|
||||
- Luggage
|
||||
- Mail
|
||||
- Mailbox
|
||||
- Male
|
||||
- Map
|
||||
- Markdown
|
||||
- Maximise
|
||||
- Medal
|
||||
- Mega
|
||||
- Menu
|
||||
- Mic
|
||||
- MicAlt
|
||||
- Microsoft
|
||||
- Minimise
|
||||
- MinusBox
|
||||
- MinusBoxMultiple
|
||||
- Minus
|
||||
- Monitor
|
||||
- MoonAlt
|
||||
- Moon
|
||||
- MoreHorizontal
|
||||
- MoreVertical
|
||||
- Mouse
|
||||
- Move
|
||||
- Music
|
||||
- Navigation
|
||||
- Nextjs
|
||||
- NoteText
|
||||
- Note
|
||||
- Npm
|
||||
- OneFingerSelect
|
||||
- OneFingerTap
|
||||
- Opacity
|
||||
- OpenInBrowser
|
||||
- OpenInWindow
|
||||
- Options
|
||||
- PageBreak
|
||||
- Page
|
||||
- Paint
|
||||
- PaletteAlt
|
||||
- Palette
|
||||
- Pan
|
||||
- Paperclip
|
||||
- Parachute
|
||||
- Paragraph
|
||||
- Paste
|
||||
- Pause
|
||||
- Paw
|
||||
- PenAlt
|
||||
- Pen
|
||||
- PentagonBottom
|
||||
- PentagonDown
|
||||
- PentagonLeft
|
||||
- PentagonRight
|
||||
- PentagonTop
|
||||
- PentagonUp
|
||||
- Performance
|
||||
- Phone
|
||||
- PhoneMissed
|
||||
- PieChart
|
||||
- PieChartAlt
|
||||
- Pin
|
||||
- Placeholder
|
||||
- Planet
|
||||
- Play
|
||||
- Playlist
|
||||
- Plus
|
||||
- Power
|
||||
- Prev
|
||||
- Print
|
||||
- RadioHandheld
|
||||
- RadioOn
|
||||
- RadioSignal
|
||||
- RadioTower
|
||||
- Reciept
|
||||
- RecieptAlt
|
||||
- Redo
|
||||
- Reload
|
||||
- RemoveBox
|
||||
- RemoveBoxMultiple
|
||||
- Repeat
|
||||
- Reply
|
||||
- ReplyAll
|
||||
- RoundedCorner
|
||||
- Save
|
||||
- Scale
|
||||
- Script
|
||||
- ScriptText
|
||||
- ScrollHorizontal
|
||||
- ScrollVertical
|
||||
- Sd
|
||||
- Search
|
||||
- Section
|
||||
- SectionCopy
|
||||
- SectionMinus
|
||||
- SectionPlus
|
||||
- SectionX
|
||||
- Server
|
||||
- SharpCorner
|
||||
- Shield
|
||||
- ShieldOff
|
||||
- Ship
|
||||
- ShoppingBag
|
||||
- Shuffle
|
||||
- Sliders
|
||||
- Sliders2
|
||||
- Sort
|
||||
- SortAlphabetic
|
||||
- SortNumeric
|
||||
- Speaker
|
||||
- SpeedFast
|
||||
- SpeedMedium
|
||||
- SpeedSlow
|
||||
- Spotlight
|
||||
- Store
|
||||
- Subscriptions
|
||||
- Subtitles
|
||||
- Suitcase
|
||||
- SunAlt
|
||||
- Sun
|
||||
- Switch
|
||||
- Sync
|
||||
- Tab
|
||||
- Table
|
||||
- Tea
|
||||
- Teach
|
||||
- TextAdd
|
||||
- TextColums
|
||||
- TextSearch
|
||||
- TextWrap
|
||||
- Timeline
|
||||
- ToggleLeft
|
||||
- ToggleRight
|
||||
- Tournament
|
||||
- TrackChanges
|
||||
- TrashAlt
|
||||
- Trash
|
||||
- TrendingDown
|
||||
- TrendingUp
|
||||
- Trending
|
||||
- Trophy
|
||||
- Truck
|
||||
- Undo
|
||||
- Ungroup
|
||||
- Unlink
|
||||
- Upload
|
||||
- UserMinus
|
||||
- UserPlus
|
||||
- User
|
||||
- Users
|
||||
- UserX
|
||||
- VideoOff
|
||||
- Video
|
||||
- ViewCol
|
||||
- ViewList
|
||||
- ViewportNarrow
|
||||
- ViewportWide
|
||||
- Visible
|
||||
- Volume1
|
||||
- Volume2
|
||||
- Volume3
|
||||
- VolumeMinus
|
||||
- VolumePlus
|
||||
- VolumeVibrate
|
||||
- VolumeX
|
||||
- Volume
|
||||
- Wallet
|
||||
- WarningBox
|
||||
- Wind
|
||||
- Zap
|
||||
- ZoomIn
|
||||
- ZoomOut
|
||||
|
||||
## Icon Demo
|
||||
|
||||
For a visual reference of all icons, run the demo:
|
||||
|
||||
```bash
|
||||
npm run demo
|
||||
```
|
||||
|
||||
This will start a local server with a visual catalog of all available icons.
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user