@astropub/icons
Version:
Radix Icons for Astro
390 lines (363 loc) • 48.6 kB
Markdown
# Radix Icons for Astro
Radix Icons are a crisp set of 15×15 icons designed by the [Modulz](https://modulz.app/) team.
```shell
npm install /icons
```
## Usage
All of the icons are available from a single import, and only the icons that are used will be added to the page.
```astro
---
import * as Icon from '/icons'
---
<Icon.Sun />
<Icon.Moon />
<Icon.Star />
<Icon.LightningBolt size="60" fill="gold" />
```
The icons are also available as individual imports.
```astro
---
import SunIcon from '/icons/Sun'
import MoonIcon from '/icons/MoonIcon'
import StarIcon from '/icons/StarIcon'
import LightningBoltIcon from '/icons/LightningBolt'
---
<SunIcon />
<MoonIcon />
<StarIcon />
<LightningBoltIcon size="60" fill="gold" />
```
## Prop Types
The following `Props` interface is available to every icon:
```ts
export interface Props {
'fill'?: string;
'fill-opacity'?: number | string;
'fill-rule'?: "nonzero" | "evenodd" | "inherit";
'height'?: number | string;
'size'?: number | string;
'stroke'?: string;
'stroke-dasharray'?: string | number;
'stroke-dashoffset'?: string | number;
'stroke-linecap'?: "butt" | "round" | "square" | "inherit";
'stroke-linejoin'?: "miter" | "round" | "bevel" | "inherit";
'stroke-miterlimit'?: number | string;
'stroke-opacity'?: number | string;
'stroke-width'?: number | string;
'viewBox'?: string;
'width'?: number | string;
}
```
- The `Props` interface additionally includes:
- All HTML global attributes.
- All WAI-ARIA attributes and the WAI-ARIA role attribute.
- The `title` attribute transforms into a `<title>` element within the `<svg>`.
- The `size` attribute transforms values like `1.5x` into `1.5em`.
- The `size` attribute is used as the default values for `width` and `height`.
## Icons
<!-- ICON_STATS: -->
There are 297 icons included in this package.
| Icon | Import | Preview |
|:---- |:------ |:-------:|
| **Activity Log** | `/icons/ActivityLog` |  |
| **Align Baseline** | `/icons/AlignBaseline` |  |
| **Align Bottom** | `/icons/AlignBottom` |  |
| **Align Center Horizontally** | `/icons/AlignCenterHorizontally` |  |
| **Align Center Vertically** | `/icons/AlignCenterVertically` |  |
| **Align Left** | `/icons/AlignLeft` |  |
| **Align Right** | `/icons/AlignRight` |  |
| **Align Top** | `/icons/AlignTop` |  |
| **All Sides** | `/icons/AllSides` |  |
| **Angle** | `/icons/Angle` |  |
| **Archive** | `/icons/Archive` |  |
| **Arrow Bottom Left** | `/icons/ArrowBottomLeft` |  |
| **Arrow Bottom Right** | `/icons/ArrowBottomRight` |  |
| **Arrow Down** | `/icons/ArrowDown` |  |
| **Arrow Left** | `/icons/ArrowLeft` |  |
| **Arrow Right** | `/icons/ArrowRight` |  |
| **Arrow Top Left** | `/icons/ArrowTopLeft` |  |
| **Arrow Top Right** | `/icons/ArrowTopRight` |  |
| **Arrow Up** | `/icons/ArrowUp` |  |
| **Aspect Ratio** | `/icons/AspectRatio` |  |
| **Avatar** | `/icons/Avatar` |  |
| **Backpack** | `/icons/Backpack` |  |
| **Badge** | `/icons/Badge` |  |
| **Bar Chart** | `/icons/BarChart` |  |
| **Bell** | `/icons/Bell` |  |
| **Blending Mode** | `/icons/BlendingMode` |  |
| **Bookmark** | `/icons/Bookmark` |  |
| **Border All** | `/icons/BorderAll` |  |
| **Border Bottom** | `/icons/BorderBottom` |  |
| **Border Dashed** | `/icons/BorderDashed` |  |
| **Border Dotted** | `/icons/BorderDotted` |  |
| **Border Left** | `/icons/BorderLeft` |  |
| **Border None** | `/icons/BorderNone` |  |
| **Border Right** | `/icons/BorderRight` |  |
| **Border Solid** | `/icons/BorderSolid` |  |
| **Border Split** | `/icons/BorderSplit` |  |
| **Border Style** | `/icons/BorderStyle` |  |
| **Border Top** | `/icons/BorderTop` |  |
| **Box Model** | `/icons/BoxModel` |  |
| **Box** | `/icons/Box` |  |
| **Button** | `/icons/Button` |  |
| **Calendar** | `/icons/Calendar` |  |
| **Camera** | `/icons/Camera` |  |
| **Card Stack Minus** | `/icons/CardStackMinus` |  |
| **Card Stack Plus** | `/icons/CardStackPlus` |  |
| **Card Stack** | `/icons/CardStack` |  |
| **Caret Down** | `/icons/CaretDown` |  |
| **Caret Left** | `/icons/CaretLeft` |  |
| **Caret Right** | `/icons/CaretRight` |  |
| **Caret Sort** | `/icons/CaretSort` |  |
| **Caret Up** | `/icons/CaretUp` |  |
| **Chat Bubble** | `/icons/ChatBubble` |  |
| **Check Circled** | `/icons/CheckCircled` |  |
| **Check** | `/icons/Check` |  |
| **Checkbox** | `/icons/Checkbox` |  |
| **Chevron Down** | `/icons/ChevronDown` |  |
| **Chevron Left** | `/icons/ChevronLeft` |  |
| **Chevron Right** | `/icons/ChevronRight` |  |
| **Chevron Up** | `/icons/ChevronUp` |  |
| **Circle Backslash** | `/icons/CircleBackslash` |  |
| **Circle** | `/icons/Circle` |  |
| **Clipboard Copy** | `/icons/ClipboardCopy` |  |
| **Clipboard** | `/icons/Clipboard` |  |
| **Clock** | `/icons/Clock` |  |
| **Code** | `/icons/Code` |  |
| **CodeSandbox Logo** | `/icons/CodeSandboxLogo` |  |
| **Column Spacing** | `/icons/ColumnSpacing` |  |
| **Columns** | `/icons/Columns` |  |
| **Commit** | `/icons/Commit` |  |
| **Component 1** | `/icons/Component1` |  |
| **Component 2** | `/icons/Component2` |  |
| **Component Boolean** | `/icons/ComponentBoolean` |  |
| **Component Instance** | `/icons/ComponentInstance` |  |
| **Component None** | `/icons/ComponentNone` |  |
| **Component Placeholder** | `/icons/ComponentPlaceholder` |  |
| **Container** | `/icons/Container` |  |
| **Cookie** | `/icons/Cookie` |  |
| **Copy** | `/icons/Copy` |  |
| **Corner Bottom Left** | `/icons/CornerBottomLeft` |  |
| **Corner Bottom Right** | `/icons/CornerBottomRight` |  |
| **Corner Top Left** | `/icons/CornerTopLeft` |  |
| **Corner Top Right** | `/icons/CornerTopRight` |  |
| **Corners** | `/icons/Corners` |  |
| **Countdown Timer** | `/icons/CountdownTimer` |  |
| **Counter Clockwise Clock** | `/icons/CounterClockwiseClock` |  |
| **Crop** | `/icons/Crop` |  |
| **Cross 1** | `/icons/Cross1` |  |
| **Cross 2** | `/icons/Cross2` |  |
| **Cross Circled** | `/icons/CrossCircled` |  |
| **Crosshair 1** | `/icons/Crosshair1` |  |
| **Crosshair 2** | `/icons/Crosshair2` |  |
| **Crumpled Paper** | `/icons/CrumpledPaper` |  |
| **Cube** | `/icons/Cube` |  |
| **Cursor Arrow** | `/icons/CursorArrow` |  |
| **Cursor Text** | `/icons/CursorText` |  |
| **Dash** | `/icons/Dash` |  |
| **Dashboard** | `/icons/Dashboard` |  |
| **Dimensions** | `/icons/Dimensions` |  |
| **Disc** | `/icons/Disc` |  |
| **Divider Horizontal** | `/icons/DividerHorizontal` |  |
| **Divider Vertical** | `/icons/DividerVertical` |  |
| **Dot Filled** | `/icons/DotFilled` |  |
| **Dot** | `/icons/Dot` |  |
| **Dots Horizontal** | `/icons/DotsHorizontal` |  |
| **Dots Vertical** | `/icons/DotsVertical` |  |
| **Double Arrow Down** | `/icons/DoubleArrowDown` |  |
| **Double Arrow Left** | `/icons/DoubleArrowLeft` |  |
| **Double Arrow Right** | `/icons/DoubleArrowRight` |  |
| **Double Arrow Up** | `/icons/DoubleArrowUp` |  |
| **Download** | `/icons/Download` |  |
| **Drag Handle Dots 1** | `/icons/DragHandleDots1` |  |
| **Drag Handle Dots 2** | `/icons/DragHandleDots2` |  |
| **Drag Handle Horizontal** | `/icons/DragHandleHorizontal` |  |
| **Drag Handle Vertical** | `/icons/DragHandleVertical` |  |
| **Drawing Pin Filled** | `/icons/DrawingPinFilled` |  |
| **Drawing Pin** | `/icons/DrawingPin` |  |
| **Dropdown Menu** | `/icons/DropdownMenu` |  |
| **Enter Full Screen** | `/icons/EnterFullScreen` |  |
| **Enter** | `/icons/Enter` |  |
| **Envelope Closed** | `/icons/EnvelopeClosed` |  |
| **Envelope Open** | `/icons/EnvelopeOpen` |  |
| **Exclamation Triangle** | `/icons/ExclamationTriangle` |  |
| **Exit Full Screen** | `/icons/ExitFullScreen` |  |
| **Exit** | `/icons/Exit` |  |
| **External Link** | `/icons/ExternalLink` |  |
| **Eye Closed** | `/icons/EyeClosed` |  |
| **Eye None** | `/icons/EyeNone` |  |
| **Eye Open** | `/icons/EyeOpen` |  |
| **Face** | `/icons/Face` |  |
| **Figma Logo** | `/icons/FigmaLogo` |  |
| **File Minus** | `/icons/FileMinus` |  |
| **File Plus** | `/icons/FilePlus` |  |
| **File Text** | `/icons/FileText` |  |
| **File** | `/icons/File` |  |
| **Font Bold** | `/icons/FontBold` |  |
| **Font Family** | `/icons/FontFamily` |  |
| **Font Italic** | `/icons/FontItalic` |  |
| **Font Roman** | `/icons/FontRoman` |  |
| **Font Size** | `/icons/FontSize` |  |
| **Font Style** | `/icons/FontStyle` |  |
| **Frame** | `/icons/Frame` |  |
| **Framer Logo** | `/icons/FramerLogo` |  |
| **Gear** | `/icons/Gear` |  |
| **GitHub Logo** | `/icons/GitHubLogo` |  |
| **Globe** | `/icons/Globe` |  |
| **Grid** | `/icons/Grid` |  |
| **Group** | `/icons/Group` |  |
| **Half 1** | `/icons/Half1` |  |
| **Half 2** | `/icons/Half2` |  |
| **Hamburger Menu** | `/icons/HamburgerMenu` |  |
| **Hand** | `/icons/Hand` |  |
| **Heading** | `/icons/Heading` |  |
| **Height** | `/icons/Height` |  |
| **Home** | `/icons/Home` |  |
| **IconJar Logo** | `/icons/IconJarLogo` |  |
| **Id Card** | `/icons/IdCard` |  |
| **Image** | `/icons/Image` |  |
| **Info Circled** | `/icons/InfoCircled` |  |
| **Input** | `/icons/Input` |  |
| **Lap Timer** | `/icons/LapTimer` |  |
| **Layers** | `/icons/Layers` |  |
| **Layout** | `/icons/Layout` |  |
| **Letter Case Capitalize** | `/icons/LetterCaseCapitalize` |  |
| **Letter Case Lowercase** | `/icons/LetterCaseLowercase` |  |
| **Letter Case Toggle** | `/icons/LetterCaseToggle` |  |
| **Letter Case Uppercase** | `/icons/LetterCaseUppercase` |  |
| **Letter Spacing** | `/icons/LetterSpacing` |  |
| **Lightning Bolt** | `/icons/LightningBolt` |  |
| **Line Height** | `/icons/LineHeight` |  |
| **Link 1** | `/icons/Link1` |  |
| **Link 2** | `/icons/Link2` |  |
| **Link Break 1** | `/icons/LinkBreak1` |  |
| **Link Break 2** | `/icons/LinkBreak2` |  |
| **Link None 1** | `/icons/LinkNone1` |  |
| **Link None 2** | `/icons/LinkNone2` |  |
| **List Bullet** | `/icons/ListBullet` |  |
| **Lock Closed** | `/icons/LockClosed` |  |
| **Lock Open 1** | `/icons/LockOpen1` |  |
| **Lock Open 2** | `/icons/LockOpen2` |  |
| **Loop** | `/icons/Loop` |  |
| **Magic Wand** | `/icons/MagicWand` |  |
| **Magnifying Glass** | `/icons/MagnifyingGlass` |  |
| **Margin** | `/icons/Margin` |  |
| **Mask Off** | `/icons/MaskOff` |  |
| **Mask On** | `/icons/MaskOn` |  |
| **Minus Circled** | `/icons/MinusCircled` |  |
| **Minus** | `/icons/Minus` |  |
| **Mix** | `/icons/Mix` |  |
| **Mixer Horizontal** | `/icons/MixerHorizontal` |  |
| **Mixer Vertical** | `/icons/MixerVertical` |  |
| **Modulz Logo** | `/icons/ModulzLogo` |  |
| **Moon** | `/icons/Moon` |  |
| **Move** | `/icons/Move` |  |
| **Notion Logo** | `/icons/NotionLogo` |  |
| **Opacity** | `/icons/Opacity` |  |
| **Overline** | `/icons/Overline` |  |
| **Padding** | `/icons/Padding` |  |
| **Paper Plane** | `/icons/PaperPlane` |  |
| **Pause** | `/icons/Pause` |  |
| **Pencil 1** | `/icons/Pencil1` |  |
| **Pencil 2** | `/icons/Pencil2` |  |
| **Person** | `/icons/Person` |  |
| **Pie Chart** | `/icons/PieChart` |  |
| **Pilcrow** | `/icons/Pilcrow` |  |
| **Pin Bottom** | `/icons/PinBottom` |  |
| **Pin Left** | `/icons/PinLeft` |  |
| **Pin Right** | `/icons/PinRight` |  |
| **Pin Top** | `/icons/PinTop` |  |
| **Play** | `/icons/Play` |  |
| **Plus Circled** | `/icons/PlusCircled` |  |
| **Plus** | `/icons/Plus` |  |
| **Question Mark Circled** | `/icons/QuestionMarkCircled` |  |
| **Question Mark** | `/icons/QuestionMark` |  |
| **Quote** | `/icons/Quote` |  |
| **Radiobutton** | `/icons/Radiobutton` |  |
| **Reader** | `/icons/Reader` |  |
| **Reload** | `/icons/Reload` |  |
| **Reset** | `/icons/Reset` |  |
| **Resume** | `/icons/Resume` |  |
| **Rocket** | `/icons/Rocket` |  |
| **Rotate Counter Clockwise** | `/icons/RotateCounterClockwise` |  |
| **Row Spacing** | `/icons/RowSpacing` |  |
| **Rows** | `/icons/Rows` |  |
| **Ruler Horizontal** | `/icons/RulerHorizontal` |  |
| **Ruler Square** | `/icons/RulerSquare` |  |
| **Section** | `/icons/Section` |  |
| **Sewing Pin Filled** | `/icons/SewingPinFilled` |  |
| **Sewing Pin** | `/icons/SewingPin` |  |
| **Shadow Inner** | `/icons/ShadowInner` |  |
| **Shadow None** | `/icons/ShadowNone` |  |
| **Shadow Outer** | `/icons/ShadowOuter` |  |
| **Shadow** | `/icons/Shadow` |  |
| **Share 1** | `/icons/Share1` |  |
| **Share 2** | `/icons/Share2` |  |
| **Shuffle** | `/icons/Shuffle` |  |
| **Size** | `/icons/Size` |  |
| **Sketch Logo** | `/icons/SketchLogo` |  |
| **Slash** | `/icons/Slash` |  |
| **Slider** | `/icons/Slider` |  |
| **Space Between Horizontally** | `/icons/SpaceBetweenHorizontally` |  |
| **Space Between Vertically** | `/icons/SpaceBetweenVertically` |  |
| **Space Evenly Horizontally** | `/icons/SpaceEvenlyHorizontally` |  |
| **Space Evenly Vertically** | `/icons/SpaceEvenlyVertically` |  |
| **Speaker Loud** | `/icons/SpeakerLoud` |  |
| **Speaker Moderate** | `/icons/SpeakerModerate` |  |
| **Speaker Off** | `/icons/SpeakerOff` |  |
| **Speaker Quiet** | `/icons/SpeakerQuiet` |  |
| **Square** | `/icons/Square` |  |
| **Stack** | `/icons/Stack` |  |
| **Star Filled** | `/icons/StarFilled` |  |
| **Star** | `/icons/Star` |  |
| **Stitches Logo** | `/icons/StitchesLogo` |  |
| **Stop** | `/icons/Stop` |  |
| **Stopwatch** | `/icons/Stopwatch` |  |
| **Stretch Horizontally** | `/icons/StretchHorizontally` |  |
| **Stretch Vertically** | `/icons/StretchVertically` |  |
| **Strikethrough** | `/icons/Strikethrough` |  |
| **Sun** | `/icons/Sun` |  |
| **Switch** | `/icons/Switch` |  |
| **Symbol** | `/icons/Symbol` |  |
| **Table** | `/icons/Table` |  |
| **Target** | `/icons/Target` |  |
| **Text Align Center** | `/icons/TextAlignCenter` |  |
| **Text Align Justify** | `/icons/TextAlignJustify` |  |
| **Text Align Left** | `/icons/TextAlignLeft` |  |
| **Text Align Right** | `/icons/TextAlignRight` |  |
| **Text None** | `/icons/TextNone` |  |
| **Text** | `/icons/Text` |  |
| **Thick Arrow Down** | `/icons/ThickArrowDown` |  |
| **Thick Arrow Left** | `/icons/ThickArrowLeft` |  |
| **Thick Arrow Right** | `/icons/ThickArrowRight` |  |
| **Thick Arrow Up** | `/icons/ThickArrowUp` |  |
| **Timer** | `/icons/Timer` |  |
| **Tokens** | `/icons/Tokens` |  |
| **Track Next** | `/icons/TrackNext` |  |
| **Track Previous** | `/icons/TrackPrevious` |  |
| **Transparency Grid** | `/icons/TransparencyGrid` |  |
| **Trash** | `/icons/Trash` |  |
| **Triangle Down** | `/icons/TriangleDown` |  |
| **Triangle Left** | `/icons/TriangleLeft` |  |
| **Triangle Right** | `/icons/TriangleRight` |  |
| **Triangle Up** | `/icons/TriangleUp` |  |
| **Twitter Logo** | `/icons/TwitterLogo` |  |
| **Underline** | `/icons/Underline` |  |
| **Update** | `/icons/Update` |  |
| **Upload** | `/icons/Upload` |  |
| **Value None** | `/icons/ValueNone` |  |
| **Value** | `/icons/Value` |  |
| **Vercel Logo** | `/icons/VercelLogo` |  |
| **Video** | `/icons/Video` |  |
| **View Grid** | `/icons/ViewGrid` |  |
| **View Horizontal** | `/icons/ViewHorizontal` |  |
| **View None** | `/icons/ViewNone` |  |
| **View Vertical** | `/icons/ViewVertical` |  |
| **Width** | `/icons/Width` |  |
| **Zoom In** | `/icons/ZoomIn` |  |
| **Zoom Out** | `/icons/ZoomOut` |  |
<!-- :ICON_STATS -->
---
## License
Licensed under the MIT License. Copyright © 2020–present Modulz.