@leta-io/icons 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.js +650 -616
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @leta-io/icons
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
Icon registry for the LETA design system. Outlined is the default; 137 of the 261
|
|
4
|
+
icons also ship a filled variant, and names that have only one glyph fall back to
|
|
5
|
+
it automatically, so `outlined` is always safe to pass.
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @leta-io/icons
|
|
@@ -15,6 +15,34 @@ import { Icon } from '@leta-io/icons';
|
|
|
15
15
|
<Icon name="Check-Circle" outlined={false} />
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
## Where the glyphs come from
|
|
19
|
+
|
|
20
|
+
Four libraries, resolved at build time. **Which one backs a given icon is an
|
|
21
|
+
implementation detail** — you always reference an icon by its LETA name, and the
|
|
22
|
+
`Icon` component renders every source identically.
|
|
23
|
+
|
|
24
|
+
| Source | Icons | Package |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| Material Symbols (rounded) | 248 | `@material-symbols/svg-500` |
|
|
27
|
+
| Tabler | 10 | `@iconify-json/tabler` |
|
|
28
|
+
| Phosphor | 2 | `@iconify-json/ph` |
|
|
29
|
+
| Material Design Icons | 1 | `@iconify-json/mdi` |
|
|
30
|
+
|
|
31
|
+
Material Symbols is the house set and covers almost everything. The other three
|
|
32
|
+
exist because Figma reaches for them where Material Symbols has no suitable
|
|
33
|
+
glyph — currently `Pending`, `Insights`, `KPI-Target`, `Leaderboard`,
|
|
34
|
+
`Artificial-Intelligence`, `Circle-Large` (Tabler), `Bar-Chart` (Phosphor) and
|
|
35
|
+
`Circle-Medium` (MDI).
|
|
36
|
+
|
|
37
|
+
The source is **read from the Figma glyph layer's own name**, which is an Iconify
|
|
38
|
+
identifier (`tabler:bulb-filled`, `ph:chart-bar`). Nothing about the LETA icon
|
|
39
|
+
name encodes it, so a designer swapping an icon's underlying glyph for one from a
|
|
40
|
+
different library needs no code change beyond re-running the registry — and
|
|
41
|
+
`IconName` never carries a library prefix.
|
|
42
|
+
|
|
43
|
+
Adding a fifth library is a dependency plus one entry in `ICONIFY_SETS` in
|
|
44
|
+
`scripts/build-registry.ts`.
|
|
45
|
+
|
|
18
46
|
## Notes
|
|
19
47
|
|
|
20
48
|
- `IconName` is exported as a union of all available names, so the set is
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
type IconName = "Account" | "Add" | "Add-Circle" | "Aid" | "Alarm" | "Alerts" | "Analytics" | "Approved-Order" | "Apps" | "Archive" | "Arrange" | "Arrow-Left" | "Arrow-Right" | "Attachment" | "Automatic" | "Available-Vehicle" | "Backward" | "Bag" | "Bar-Chart" | "Barcode" | "Bolt" | "Briefcase" | "Broadcast" | "Bug" | "Calendar" | "Calendar-Add" | "Calendar-Busy" | "Calendar-Check" | "Camera" | "Cancel" | "Cancel-Circle" | "Cancelled-Order" | "Cash" | "Check" | "Check-Circle" | "Checkbox-Active" | "Checkbox-Default" | "Checkbox-Indeterminate" | "Checklist" | "Chevron-Down" | "Chevron-Left" | "Chevron-Right" | "Chevron-Up" | "Circle-Large" | "Circle-Medium" | "Clock" | "Cloud" | "Code" | "Collapse" | "Collapse-Left" | "Columns" | "Comment" | "Company" | "Console" | "Copy" | "Crate" | "Credit-Card-Off" | "
|
|
3
|
+
type IconName = "Account" | "Add" | "Add-Circle" | "Aid" | "Alarm" | "Alerts" | "Analytics" | "Approved-Order" | "Apps" | "Archive" | "Arrange" | "Arrow-Left" | "Arrow-Right" | "Artificial-Intelligence" | "Attachment" | "Automatic" | "Available-Vehicle" | "Backward" | "Bag" | "Bar-Chart" | "Barcode" | "Bolt" | "Briefcase" | "Broadcast" | "Bug" | "Calendar" | "Calendar-Add" | "Calendar-Busy" | "Calendar-Check" | "Camera" | "Cancel" | "Cancel-Circle" | "Cancelled-Order" | "Cash" | "Check" | "Check-Circle" | "Checkbox-Active" | "Checkbox-Default" | "Checkbox-Indeterminate" | "Checklist" | "Chevron-Down" | "Chevron-Left" | "Chevron-Right" | "Chevron-Up" | "Circle-Large" | "Circle-Medium" | "Clock" | "Cloud" | "Code" | "Collapse" | "Collapse-Left" | "Columns" | "Comment" | "Company" | "Console" | "Copy" | "Crate" | "Credit-Card-Off" | "Crosshair" | "Cycle" | "Dark-Mode" | "Dashboard" | "Data-Stack" | "Data-Table" | "Deactivate" | "Decrease" | "Deductions" | "Delay" | "Delete" | "Depot" | "Dialpad" | "Directions" | "Disconnected" | "Discount" | "Distance" | "Document" | "Dollar" | "Double-Check" | "Down-Arrow" | "Download" | "Draft" | "Drop-Off" | "Earnings" | "Edit" | "Edit-Off" | "Error" | "Expand" | "Expand-Right" | "Explore" | "Explore-Nearby" | "Face-Scan" | "Filter" | "Fingerprint" | "Fix" | "Flag" | "Fleet" | "Flip-Camera" | "Format-Bold" | "Format-Italics" | "Format-Underline" | "Forward" | "Front-Door" | "Fuel" | "Graph" | "Group-Add" | "Half-Star" | "Halt" | "Help" | "Hide" | "History" | "Home" | "Hourglass" | "Hub" | "ID" | "Image" | "Image-Upload" | "Inbox" | "Increase" | "Info" | "Insights" | "Integration" | "Internet-Call" | "Inventory" | "Join" | "Key" | "KPI-Target" | "Label" | "Layers" | "Leaderboard" | "Leads" | "Light" | "Lightbulb" | "Link" | "Liquor" | "List" | "Load" | "Loading" | "Location" | "Location-Check" | "Location-Off" | "Location-Wrong" | "Lock" | "Logout" | "Mail" | "Mail-Check" | "Mail-Failed" | "Maintenance" | "Manual-Touch" | "Map" | "Menu" | "Merge" | "Message" | "Meter" | "Microphone" | "Minus" | "Mixer" | "More" | "Motorcycle" | "Moving-Vehicle" | "Navigation-Assistant" | "Note" | "Notifications" | "Offline" | "Offload" | "Online" | "Open" | "Open-Box" | "Order-Status" | "Orders" | "Overview" | "Palette" | "Partner" | "Paste" | "Pause" | "Payment" | "Payout" | "Pending" | "Permissions" | "Phone" | "Phone-Message" | "Pickup" | "Pin" | "Play" | "Polyline" | "Poor-Network" | "Power" | "Preferences" | "Preview" | "Priority" | "Privacy-Policy" | "Proceed" | "Question" | "Radar" | "Radio-Button-Active" | "Radio-Button-Default" | "Receipt" | "Redo" | "Refresh" | "Reorder" | "Reports" | "Requests" | "Return" | "Reviews" | "Round-Star" | "Sales" | "Save" | "Scooter" | "Search" | "Select" | "Send" | "Settings" | "Share" | "Shelf" | "Show" | "Sidebar" | "Signal-1-Bar" | "Signal-2-Bars" | "Signal-3-Bars" | "Signature" | "Sort" | "Split" | "Square" | "Star" | "Stepper" | "Stop" | "Support" | "Support-Agent" | "Swap" | "Switch" | "Tag" | "Tasks" | "Tasks-Completed" | "Team" | "Thumbs-Down" | "Thumbs-Up" | "Timer" | "Tracking" | "Trip-Origin" | "Trips-Routing" | "Trophy" | "Truck" | "Undo" | "Up-Arrow" | "Update" | "Upload" | "User" | "User-Add" | "User-Admin" | "User-Available" | "User-Cancel" | "User-Caution" | "User-Edit" | "User-Unavailable" | "Users" | "VOIP-Call" | "Wallet" | "Warning" | "Weight" | "Wheel" | "Widget" | "Write";
|
|
4
4
|
|
|
5
5
|
type IconSize = 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
|
|
6
6
|
interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'children'> {
|