# @babeard/svelte-heroicons

> Svelte wrappers for the Heroicons v2 library.

Latest version **2.0.3** (published 2024-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @babeard/svelte-heroicons
pnpm add @babeard/svelte-heroicons
yarn add @babeard/svelte-heroicons
bun add @babeard/svelte-heroicons
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2024-01-12 |
| First published | 2022-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 2.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Brian Beard |
| Maintainers | babeard |
| Keywords | svelte, svelte4, sveltejs, heroicons, icons |

## Links

- npm: https://www.npmjs.com/package/@babeard/svelte-heroicons
- Repository: https://github.com/babeard/svelte-heroicons
- Issues: https://github.com/babeard/svelte-heroicons/issues
- npm.io page: https://npm.io/package/@babeard/svelte-heroicons

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2024-01-12
- 2.0.0-rc.0 (next) — 2022-09-23
- 2.0.2 — 2024-01-12
- 2.0.1 — 2024-01-11

## README

# svelte-heroicons

> Please note: This is a temprorary fork of [rgossiaux/svelte-heroicons](https://github.com/rgossiaux/svelte-heroicons) until v2 support is merged.

Yet another Svelte wrapper for [Heroicons](https://heroicons.com). 

This library differs from others in a couple main ways:
* The icon components forward common event listeners to the underlying SVG, so you may use `on:click` and so on;
* The API is closer to the official React wrappers, making it easier to use when converting [Tailwind UI](https://tailwindui.com/) components to Svelte in conjunction with [svelte-headlessui](https://github.com/rgossiaux/svelte-headlessui);
* It's based on Heroicons **2.1.1**

# Installation

```
npm install -D @babeard/svelte-heroicons@next
```

# Usage

Heroicons contains three types of icons: outline, solid, mini, and micro. They can be imported from `@babeard/svelte-heroicons/outline`, `@babeard/svelte-heroicons/solid`, `@babeard/svelte-heroicons/mini`, and `@babeard/svelte-heroicons/micro` respectively.

All icon names are CamelCased and end with the word `Icon`; for example, the `academic-cap` icon on heroicons.com is imported as `AcademicCapIcon`.

```svelte

<script>
  import { MegaphoneIcon } from "@babeard/svelte-heroicons/solid";
  import { CheckIcon } from "@babeard/svelte-heroicons/outline";
  import { ChatBubbleLeftIcon } from "@babeard/svelte-heroicons/mini"
</script>

<CheckIcon />
<MegaphoneIcon class="my-class" aria-hidden="true" />
<ChatBubbleLeftIcon />

```

# Upgrading to v2

With the new release of hericons, there are some breaking changes to be aware of. 

See the [heroicons v2 release notes](https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0) for additional information.

## New Icon Styles
There are now 3 styles of icons to choose from instead of 2 

- Outline — line icons with a 1.5px stroke, drawn in a 24px view box.
- Solid — solid icons with filled shapes, drawn in a 24px view box.
- Mini — solid icons with filled shapes, drawn in a 20px view box.
- Micro — solid icons with filled shapes, drawn in a 16px view box.

Note: The old `Solid` with the view box size of 20px was essentially renamed to `Mini` in v2.

## Icons Renamed

Many icons were renamed to more literal names. For exmaple, `MailIcon` has been renamed to `EnvelopeIcon`, and `SearchIcon` has been renamed to `MagnifyingGlassIcon`.

| Old Name | New Name |
| -------- | ------ |
|AdjustmentsIcon|AdjustmentsVerticalIcon|
|AnnotationIcon|ChatBubbleBottomCenterTextIcon|
|ArchiveIcon|ArchiveBoxIcon|
|ArrowCircleDownIcon|ArrowDownCircleIcon|
|ArrowCircleLeftIcon|ArrowLeftCircleIcon|
|ArrowCircleRightIcon|ArrowRightCircleIcon|
|ArrowCircleUpIcon|ArrowUpCircleIcon|
|ArrowNarrowDownIcon|ArrowLongDownIcon|
|ArrowNarrowLeftIcon|ArrowLongLeftIcon|
|ArrowNarrowRightIcon|ArrowLongRightIcon|
|ArrowNarrowUpIcon|ArrowLongUpIcon|
|ArrowSmLeftIcon|ArrowSmallLeftIcon|
|ArrowSmRightIcon|ArrowSmallRightIcon|
|ArrowSmUpIcon|ArrowSmallUpIcon|
|ArrowSmDownIcon|ArrowSmallDownIcon|
|ArrowsExpandIcon|ArrowsPointingOutIcon|
|BadgeCheckIcon|CheckBadgeIcon|
|BanIcon|NoSymbolIcon|
|BookmarkAltIcon|BookmarkSquareIcon|
|CashIcon|BanknotesIcon|
|ChartSquareBarIcon|ChartBarSquareIcon|
|ChatAlt2Icon|ChatBubbleLeftRightIcon|
|ChatAltIcon|ChatBubbleLeftEllipsisIcon|
|ChatIcon|ChatBubbleOvalLeftEllipsisIcon|
|ChipIcon|CpuChipIcon|
|ClipboardCheckIcon|ClipboardDocumentCheckIcon|
|ClipboardCopyIcon|ClipboardDocumentIcon|
|ClipboardListIcon|ClipboardDocumentListIcon|
|CloudDownloadIcon|CloudArrowDownIcon|
|CloudUploadIcon|CloudArrowUpIcon|
|CodeIcon|CodeBracketIcon|
|CollectionIcon|RectangleStackIcon|
|ColorSwatchIcon|SwatchIcon|
|CursorClickIcon|CursorArrowRaysIcon|
|DatabaseIcon|CircleStackIcon|
|DesktopComputerIcon|ComputerDesktopIcon|
|DeviceMobileIcon|DevicePhoneMobileIcon|
|DocumentAddIcon|DocumentPlusIcon|
|DocumentDownloadIcon|DocumentArrowDownIcon|
|DocumentRemoveIcon|DocumentMinusIcon|
|DocumentReportIcon|DocumentChartBarIcon|
|DocumentSearchIcon|DocumentMagnifyingGlassIcon|
|DotsCircleHorizontalIcon|EllipsisHorizontalCircleIcon|
|DotsHorizontalIcon|EllipsisHorizontalIcon|
|DotsVerticalIcon|EllipsisVerticalIcon|
|DownloadIcon|ArrowDownTrayIcon|
|DuplicateIcon|Square2StackIcon|
|EmojiHappyIcon|FaceSmileIcon|
|EmojiSadIcon|FaceFrownIcon|
|ExternalLinkIcon|ArrowTopRightOnSquareIcon|
|ExclamationIcon|ExclamationTriangleIcon|
|EyeOffIcon|EyeSlashIcon|
|FastForwardIcon|ForwardIcon|
|FilterIcon|FunnelIcon|
|FolderAddIcon|FolderPlusIcon|
|FolderDownloadIcon|FolderArrowDownIcon|
|FolderRemoveIcon|FolderMinusIcon|
|GlobeIcon|GlobeAmericasIcon|
|HandIcon|HandRaisedIcon|
|InboxInIcon|InboxArrowDownIcon|
|LibraryIcon|BuildingLibraryIcon|
|LightningBoltIcon|BoltIcon|
|LocationMarkerIcon|MapPinIcon|
|LoginIcon|ArrowLeftOnRectangleIcon|
|LogoutIcon|ArrowRightOnRectangleIcon|
|MailOpenIcon|EnvelopeOpenIcon|
|MailIcon|EnvelopeIcon|
|MenuAlt1Icon|Bars3CenterLeftIcon|
|MenuAlt2Icon|Bars3BottomLeftIcon|
|MenuAlt3Icon|Bars3BottomRightIcon|
|MenuAlt4Icon|Bars2Icon|
|MenuIcon|Bars3Icon|
|MinusSmIcon|MinusSmallIcon|
|MusicNoteIcon|MusicalNoteIcon|
|OfficeBuildingIcon|BuildingOfficeIcon|
|PencilAltIcon|PencilSquareIcon|
|PhoneIncomingIcon|PhoneArrowDownLeftIcon|
|PhoneMissedCallIcon|PhoneXMarkIcon|
|PhoneOutgoingIcon|PhoneArrowUpRightIcon|
|PhotographIcon|PhotoIcon|
|PlusSmIcon|PlusSmallIcon|
|PuzzleIcon|PuzzlePieceIcon|
|QrcodeIcon|QrCodeIcon|
|ReceiptTaxIcon|ReceiptPercentIcon|
|RefreshIcon|ArrowPathIcon|
|ReplyIcon|ArrowUturnLeftIcon|
|RewindIcon|BackwardIcon|
|SaveAsIcon|ArrowDownOnSquareStackIcon|
|SaveIcon|ArrowDownOnSquareIcon|
|SearchCircleIcon|MagnifyingGlassCircleIcon|
|SearchIcon|MagnifyingGlassIcon|
|SelectorIcon|ChevronUpDownIcon|
|SortAscendingIcon|BarsArrowUpIcon|
|SortDescendingIcon|BarsArrowDownIcon|
|SpeakerphoneIcon|MegaphoneIcon|
|StatusOfflineIcon|SignalSlashIcon|
|StatusOnlineIcon|SignalIcon|
|SupportIcon|LifebuoyIcon|
|SwitchHorizontalIcon|ArrowsRightLeftIcon|
|SwitchVerticalIcon|ArrowsUpDownIcon|
|TableIcon|TableCellsIcon|
|TemplateIcon|RectangleGroupIcon|
|TerminalIcon|CommandLineIcon|
|ThumbDownIcon|HandThumbDownIcon|
|ThumbUpIcon|HandThumbUpIcon|
|TranslateIcon|LanguageIcon|
|TrendingDownIcon|ArrowTrendingDownIcon|
|TrendingUpIcon|ArrowTrendingUpIcon|
|UploadIcon|ArrowUpTrayIcon|
|UserAddIcon|UserPlusIcon|
|UserRemoveIcon|UserMinusIcon|
|ViewBoardsIcon|ViewColumnsIcon|
|ViewGridAddIcon|SquaresPlusIcon|
|ViewGridIcon|Squares2x2Icon|
|ViewListIcon|Bars4Icon|
|VolumeOffIcon|SpeakerXMarkIcon|
|VolumeUpIcon|SpeakerWaveIcon|
|XIcon|XMarkIcon|
|ZoomInIcon|MagnifyingGlassPlusIcon|
|ZoomOutIcon|MagnifyingGlassMinusIcon|

# Documentation

See [heroicons.com](https://heroicons.com) for the full list of icons.

# License

As with the main Heroicons library, this library is MIT licensed.

# Credit

All credit goes to Tailwind Labs for designing the icons and to the original ancestor to this fork [rgossiaux/svelte-heroicons](https://github.com/rgossiaux/svelte-heroicons).

---
_Source: https://npm.io/package/@babeard/svelte-heroicons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._