Typescript typing

[marcospassos]

Hey guys!

We're a heavy user of TailwindUI, but unfortunately, we're unable to use the heroicons components for React because of the lack of Typescript support.

Could you consider shipping also the typescript declaration files?

[jlarmstrongiv]

@marcospassos I agree, having a typescript version would be awesome! Do you have any workarounds? I was thinking about making a custom build-typescript.js like the build-react.js version.

[jsmith]

This is a bit tough since the files are just .jsx files. Another build-typescript.js script would work but I feel like a they should be consolidated. Alternatively impulse/heroicons-react or graywolftech/react-heroicons could be used to get TypeScript support (I wrote the second package).

[jlarmstrongiv]

@jsmith Awesome! Thanks for the alternatives 😄 I’ll definitely try out graywolftech/react-heroicons, it seems up to date and exactly what I’m looking for.

[jsmith]

Awesome glad I could help :) Let me know if you run into any issues. I'm currently only publishing an esm version but I could easily add a CommonJS version as well.

[jlarmstrongiv]

Ahh, I was wondering about that when I looked through the rollup config. I’ve been using tsdx so I don’t have to worry about those module formats. I guess I’ll find out when the rubber meets the road haha

[aliataf]

Add this line to a .d.ts file in your project: declare module '@heroicons/*';

[jsmith]

@aliataf declare module '@heroicons/*'; isn't necessary anymore since the new v1.0.0 release has types :)

[Penguinlay]

@aliataf declare module '@heroicons/*'; isn't necessary anymore since the new v1.0.0 release has types :)

VS Code is still complaining

Could not find a declaration file for module '@heroicons/vue/outline'. '/Users/shein/kk/gh/uni5/node_modules/@heroicons/vue/outline/index.js' implicitly has an 'any' type.ts(7016)

[jsmith]

@Penguinlay Oops yes you're right. This only applies to @heroicons/react and not @heroicons/vue.

[jtc42]

Any update on type support for Vue? Seems odd to have type support for React only...

[jssblck]

I'm a bit confused @jsmith - I don't see any types in the 1.0.0 or 1.0.1 releases. What am I missing?

[jsmith]

They are in the @heroicons/react/solid and @heroicons/react/outline folders. Importing like in the picture below should work in TypeScript :)

[rynz]

@bradlc Can you please add typescript declaration files for Vue as well?

[GTB3NW]

I was slightly sad that heroicons supports react typescript definitions but not vue :( It would be great to get support, it would make tailwindui just a little easier with typescript vue support :)

[Niscolinx]

Used @graywolfai/react-heroicons created by @jsmith and it was really helpful

[noahgary]

Hi, I am new to typescript and I understand a little about declaring types but in this situation, I am lost... How can I declare a HeroIcon as a type so I can accept any HeroIcon?

This is an example of my code and how I plan to ingest that icon:

import React from 'react';
import HeroIcon from '@heroicons/*'

export type NavItem = {
  /**
   * title of navigation link
   */
  name: string,
  /**
   * icon of navigation link
   */
  icon: HeroIcon,
  /**
   * href of navigation item
   */
  href: string,
  /**
   * currently selected flag
   */
  current: boolean,
}

The above is incorrect.... I see there type definitions... (e.g. /node_modules/@heroicons/react/outline/ArchiveIcon.d.ts) but I need to be able to accept any of these icons that are fed into this component.

[jsmith]

One easy solution is to just define a type:

type HeroIcon = (props: React.ComponentProps<'svg'>) => JSX.Element;

You can use this anywhere that you need to accept an icon!

[noahgary]

One easy solution is to just define a type:

type HeroIcon = (props: React.ComponentProps<'svg'>) => JSX.Element;

You can use this anywhere that you need to accept an icon!

This worked! Thanks!

[colq2]

I created a heroicons.d.ts files in a folder which is covered by tsconfig with the following content:

declare module '@heroicons/vue/*' {
  import type { DefineComponent } from "vue";
  export const AcademicCapIcon: DefineComponent<{}, {}, any>
  export const AdjustmentsIcon: DefineComponent<{}, {}, any>
  export const AnnotationIcon: DefineComponent<{}, {}, any>
  export const ArchiveIcon: DefineComponent<{}, {}, any>
  export const ArrowCircleDownIcon: DefineComponent<{}, {}, any>
  export const ArrowCircleLeftIcon: DefineComponent<{}, {}, any>
  export const ArrowCircleRightIcon: DefineComponent<{}, {}, any>
  export const ArrowCircleUpIcon: DefineComponent<{}, {}, any>
  export const ArrowDownIcon: DefineComponent<{}, {}, any>
  export const ArrowLeftIcon: DefineComponent<{}, {}, any>
  export const ArrowNarrowDownIcon: DefineComponent<{}, {}, any>
  export const ArrowNarrowLeftIcon: DefineComponent<{}, {}, any>
  export const ArrowNarrowRightIcon: DefineComponent<{}, {}, any>
  export const ArrowNarrowUpIcon: DefineComponent<{}, {}, any>
  export const ArrowRightIcon: DefineComponent<{}, {}, any>
  export const ArrowSmDownIcon: DefineComponent<{}, {}, any>
  export const ArrowSmLeftIcon: DefineComponent<{}, {}, any>
  export const ArrowSmRightIcon: DefineComponent<{}, {}, any>
  export const ArrowSmUpIcon: DefineComponent<{}, {}, any>
  export const ArrowUpIcon: DefineComponent<{}, {}, any>
  export const ArrowsExpandIcon: DefineComponent<{}, {}, any>
  export const AtSymbolIcon: DefineComponent<{}, {}, any>
  export const BackspaceIcon: DefineComponent<{}, {}, any>
  export const BadgeCheckIcon: DefineComponent<{}, {}, any>
  export const BanIcon: DefineComponent<{}, {}, any>
  export const BeakerIcon: DefineComponent<{}, {}, any>
  export const BellIcon: DefineComponent<{}, {}, any>
  export const BookOpenIcon: DefineComponent<{}, {}, any>
  export const BookmarkAltIcon: DefineComponent<{}, {}, any>
  export const BookmarkIcon: DefineComponent<{}, {}, any>
  export const BriefcaseIcon: DefineComponent<{}, {}, any>
  export const CakeIcon: DefineComponent<{}, {}, any>
  export const CalculatorIcon: DefineComponent<{}, {}, any>
  export const CalendarIcon: DefineComponent<{}, {}, any>
  export const CameraIcon: DefineComponent<{}, {}, any>
  export const CashIcon: DefineComponent<{}, {}, any>
  export const ChartBarIcon: DefineComponent<{}, {}, any>
  export const ChartPieIcon: DefineComponent<{}, {}, any>
  export const ChartSquareBarIcon: DefineComponent<{}, {}, any>
  export const ChatAlt2Icon: DefineComponent<{}, {}, any>
  export const ChatAltIcon: DefineComponent<{}, {}, any>
  export const ChatIcon: DefineComponent<{}, {}, any>
  export const CheckCircleIcon: DefineComponent<{}, {}, any>
  export const CheckIcon: DefineComponent<{}, {}, any>
  export const ChevronDoubleDownIcon: DefineComponent<{}, {}, any>
  export const ChevronDoubleLeftIcon: DefineComponent<{}, {}, any>
  export const ChevronDoubleRightIcon: DefineComponent<{}, {}, any>
  export const ChevronDoubleUpIcon: DefineComponent<{}, {}, any>
  export const ChevronDownIcon: DefineComponent<{}, {}, any>
  export const ChevronLeftIcon: DefineComponent<{}, {}, any>
  export const ChevronRightIcon: DefineComponent<{}, {}, any>
  export const ChevronUpIcon: DefineComponent<{}, {}, any>
  export const ChipIcon: DefineComponent<{}, {}, any>
  export const ClipboardCheckIcon: DefineComponent<{}, {}, any>
  export const ClipboardCopyIcon: DefineComponent<{}, {}, any>
  export const ClipboardListIcon: DefineComponent<{}, {}, any>
  export const ClipboardIcon: DefineComponent<{}, {}, any>
  export const ClockIcon: DefineComponent<{}, {}, any>
  export const CloudDownloadIcon: DefineComponent<{}, {}, any>
  export const CloudUploadIcon: DefineComponent<{}, {}, any>
  export const CloudIcon: DefineComponent<{}, {}, any>
  export const CodeIcon: DefineComponent<{}, {}, any>
  export const CogIcon: DefineComponent<{}, {}, any>
  export const CollectionIcon: DefineComponent<{}, {}, any>
  export const ColorSwatchIcon: DefineComponent<{}, {}, any>
  export const CreditCardIcon: DefineComponent<{}, {}, any>
  export const CubeTransparentIcon: DefineComponent<{}, {}, any>
  export const CubeIcon: DefineComponent<{}, {}, any>
  export const CurrencyBangladeshiIcon: DefineComponent<{}, {}, any>
  export const CurrencyDollarIcon: DefineComponent<{}, {}, any>
  export const CurrencyEuroIcon: DefineComponent<{}, {}, any>
  export const CurrencyPoundIcon: DefineComponent<{}, {}, any>
  export const CurrencyRupeeIcon: DefineComponent<{}, {}, any>
  export const CurrencyYenIcon: DefineComponent<{}, {}, any>
  export const CursorClickIcon: DefineComponent<{}, {}, any>
  export const DatabaseIcon: DefineComponent<{}, {}, any>
  export const DesktopComputerIcon: DefineComponent<{}, {}, any>
  export const DeviceMobileIcon: DefineComponent<{}, {}, any>
  export const DeviceTabletIcon: DefineComponent<{}, {}, any>
  export const DocumentAddIcon: DefineComponent<{}, {}, any>
  export const DocumentDownloadIcon: DefineComponent<{}, {}, any>
  export const DocumentDuplicateIcon: DefineComponent<{}, {}, any>
  export const DocumentRemoveIcon: DefineComponent<{}, {}, any>
  export const DocumentReportIcon: DefineComponent<{}, {}, any>
  export const DocumentSearchIcon: DefineComponent<{}, {}, any>
  export const DocumentTextIcon: DefineComponent<{}, {}, any>
  export const DocumentIcon: DefineComponent<{}, {}, any>
  export const DotsCircleHorizontalIcon: DefineComponent<{}, {}, any>
  export const DotsHorizontalIcon: DefineComponent<{}, {}, any>
  export const DotsVerticalIcon: DefineComponent<{}, {}, any>
  export const DownloadIcon: DefineComponent<{}, {}, any>
  export const DuplicateIcon: DefineComponent<{}, {}, any>
  export const EmojiHappyIcon: DefineComponent<{}, {}, any>
  export const EmojiSadIcon: DefineComponent<{}, {}, any>
  export const ExclamationCircleIcon: DefineComponent<{}, {}, any>
  export const ExclamationIcon: DefineComponent<{}, {}, any>
  export const ExternalLinkIcon: DefineComponent<{}, {}, any>
  export const EyeOffIcon: DefineComponent<{}, {}, any>
  export const EyeIcon: DefineComponent<{}, {}, any>
  export const FastForwardIcon: DefineComponent<{}, {}, any>
  export const FilmIcon: DefineComponent<{}, {}, any>
  export const FilterIcon: DefineComponent<{}, {}, any>
  export const FingerPrintIcon: DefineComponent<{}, {}, any>
  export const FireIcon: DefineComponent<{}, {}, any>
  export const FlagIcon: DefineComponent<{}, {}, any>
  export const FolderAddIcon: DefineComponent<{}, {}, any>
  export const FolderDownloadIcon: DefineComponent<{}, {}, any>
  export const FolderOpenIcon: DefineComponent<{}, {}, any>
  export const FolderRemoveIcon: DefineComponent<{}, {}, any>
  export const FolderIcon: DefineComponent<{}, {}, any>
  export const GiftIcon: DefineComponent<{}, {}, any>
  export const GlobeAltIcon: DefineComponent<{}, {}, any>
  export const GlobeIcon: DefineComponent<{}, {}, any>
  export const HandIcon: DefineComponent<{}, {}, any>
  export const HashtagIcon: DefineComponent<{}, {}, any>
  export const HeartIcon: DefineComponent<{}, {}, any>
  export const HomeIcon: DefineComponent<{}, {}, any>
  export const IdentificationIcon: DefineComponent<{}, {}, any>
  export const InboxInIcon: DefineComponent<{}, {}, any>
  export const InboxIcon: DefineComponent<{}, {}, any>
  export const InformationCircleIcon: DefineComponent<{}, {}, any>
  export const KeyIcon: DefineComponent<{}, {}, any>
  export const LibraryIcon: DefineComponent<{}, {}, any>
  export const LightBulbIcon: DefineComponent<{}, {}, any>
  export const LightningBoltIcon: DefineComponent<{}, {}, any>
  export const LinkIcon: DefineComponent<{}, {}, any>
  export const LocationMarkerIcon: DefineComponent<{}, {}, any>
  export const LockClosedIcon: DefineComponent<{}, {}, any>
  export const LockOpenIcon: DefineComponent<{}, {}, any>
  export const LoginIcon: DefineComponent<{}, {}, any>
  export const LogoutIcon: DefineComponent<{}, {}, any>
  export const MailOpenIcon: DefineComponent<{}, {}, any>
  export const MailIcon: DefineComponent<{}, {}, any>
  export const MapIcon: DefineComponent<{}, {}, any>
  export const MenuAlt1Icon: DefineComponent<{}, {}, any>
  export const MenuAlt2Icon: DefineComponent<{}, {}, any>
  export const MenuAlt3Icon: DefineComponent<{}, {}, any>
  export const MenuAlt4Icon: DefineComponent<{}, {}, any>
  export const MenuIcon: DefineComponent<{}, {}, any>
  export const MicrophoneIcon: DefineComponent<{}, {}, any>
  export const MinusCircleIcon: DefineComponent<{}, {}, any>
  export const MinusSmIcon: DefineComponent<{}, {}, any>
  export const MinusIcon: DefineComponent<{}, {}, any>
  export const MoonIcon: DefineComponent<{}, {}, any>
  export const MusicNoteIcon: DefineComponent<{}, {}, any>
  export const NewspaperIcon: DefineComponent<{}, {}, any>
  export const OfficeBuildingIcon: DefineComponent<{}, {}, any>
  export const PaperAirplaneIcon: DefineComponent<{}, {}, any>
  export const PaperClipIcon: DefineComponent<{}, {}, any>
  export const PauseIcon: DefineComponent<{}, {}, any>
  export const PencilAltIcon: DefineComponent<{}, {}, any>
  export const PencilIcon: DefineComponent<{}, {}, any>
  export const PhoneIncomingIcon: DefineComponent<{}, {}, any>
  export const PhoneMissedCallIcon: DefineComponent<{}, {}, any>
  export const PhoneOutgoingIcon: DefineComponent<{}, {}, any>
  export const PhoneIcon: DefineComponent<{}, {}, any>
  export const PhotographIcon: DefineComponent<{}, {}, any>
  export const PlayIcon: DefineComponent<{}, {}, any>
  export const PlusCircleIcon: DefineComponent<{}, {}, any>
  export const PlusSmIcon: DefineComponent<{}, {}, any>
  export const PlusIcon: DefineComponent<{}, {}, any>
  export const PresentationChartBarIcon: DefineComponent<{}, {}, any>
  export const PresentationChartLineIcon: DefineComponent<{}, {}, any>
  export const PrinterIcon: DefineComponent<{}, {}, any>
  export const PuzzleIcon: DefineComponent<{}, {}, any>
  export const QrcodeIcon: DefineComponent<{}, {}, any>
  export const QuestionMarkCircleIcon: DefineComponent<{}, {}, any>
  export const ReceiptRefundIcon: DefineComponent<{}, {}, any>
  export const ReceiptTaxIcon: DefineComponent<{}, {}, any>
  export const RefreshIcon: DefineComponent<{}, {}, any>
  export const ReplyIcon: DefineComponent<{}, {}, any>
  export const RewindIcon: DefineComponent<{}, {}, any>
  export const RssIcon: DefineComponent<{}, {}, any>
  export const SaveAsIcon: DefineComponent<{}, {}, any>
  export const SaveIcon: DefineComponent<{}, {}, any>
  export const ScaleIcon: DefineComponent<{}, {}, any>
  export const ScissorsIcon: DefineComponent<{}, {}, any>
  export const SearchCircleIcon: DefineComponent<{}, {}, any>
  export const SearchIcon: DefineComponent<{}, {}, any>
  export const SelectorIcon: DefineComponent<{}, {}, any>
  export const ServerIcon: DefineComponent<{}, {}, any>
  export const ShareIcon: DefineComponent<{}, {}, any>
  export const ShieldCheckIcon: DefineComponent<{}, {}, any>
  export const ShieldExclamationIcon: DefineComponent<{}, {}, any>
  export const ShoppingBagIcon: DefineComponent<{}, {}, any>
  export const ShoppingCartIcon: DefineComponent<{}, {}, any>
  export const SortAscendingIcon: DefineComponent<{}, {}, any>
  export const SortDescendingIcon: DefineComponent<{}, {}, any>
  export const SparklesIcon: DefineComponent<{}, {}, any>
  export const SpeakerphoneIcon: DefineComponent<{}, {}, any>
  export const StarIcon: DefineComponent<{}, {}, any>
  export const StatusOfflineIcon: DefineComponent<{}, {}, any>
  export const StatusOnlineIcon: DefineComponent<{}, {}, any>
  export const StopIcon: DefineComponent<{}, {}, any>
  export const SunIcon: DefineComponent<{}, {}, any>
  export const SupportIcon: DefineComponent<{}, {}, any>
  export const SwitchHorizontalIcon: DefineComponent<{}, {}, any>
  export const SwitchVerticalIcon: DefineComponent<{}, {}, any>
  export const TableIcon: DefineComponent<{}, {}, any>
  export const TagIcon: DefineComponent<{}, {}, any>
  export const TemplateIcon: DefineComponent<{}, {}, any>
  export const TerminalIcon: DefineComponent<{}, {}, any>
  export const ThumbDownIcon: DefineComponent<{}, {}, any>
  export const ThumbUpIcon: DefineComponent<{}, {}, any>
  export const TicketIcon: DefineComponent<{}, {}, any>
  export const TranslateIcon: DefineComponent<{}, {}, any>
  export const TrashIcon: DefineComponent<{}, {}, any>
  export const TrendingDownIcon: DefineComponent<{}, {}, any>
  export const TrendingUpIcon: DefineComponent<{}, {}, any>
  export const TruckIcon: DefineComponent<{}, {}, any>
  export const UploadIcon: DefineComponent<{}, {}, any>
  export const UserAddIcon: DefineComponent<{}, {}, any>
  export const UserCircleIcon: DefineComponent<{}, {}, any>
  export const UserGroupIcon: DefineComponent<{}, {}, any>
  export const UserRemoveIcon: DefineComponent<{}, {}, any>
  export const UserIcon: DefineComponent<{}, {}, any>
  export const UsersIcon: DefineComponent<{}, {}, any>
  export const VariableIcon: DefineComponent<{}, {}, any>
  export const VideoCameraIcon: DefineComponent<{}, {}, any>
  export const ViewBoardsIcon: DefineComponent<{}, {}, any>
  export const ViewGridAddIcon: DefineComponent<{}, {}, any>
  export const ViewGridIcon: DefineComponent<{}, {}, any>
  export const ViewListIcon: DefineComponent<{}, {}, any>
  export const VolumeOffIcon: DefineComponent<{}, {}, any>
  export const VolumeUpIcon: DefineComponent<{}, {}, any>
  export const WifiIcon: DefineComponent<{}, {}, any>
  export const XCircleIcon: DefineComponent<{}, {}, any>
  export const XIcon: DefineComponent<{}, {}, any>
  export const ZoomInIcon: DefineComponent<{}, {}, any>
  export const ZoomOutIcon: DefineComponent<{}, {}, any>
}

I am using PHPStorm and it stop complaining with this. But unfortunately I didn't get autocompletion which I would have without typescript.

[deadcoder0904]

Not sure why this isn't automated yet! Pretty sure its 10 mins work & solve a lot of problems for TS users :)

Currently using this for React thanks to @colq2:

declare module '@heroicons/react/*' {
    import type { DefineComponent } from 'react'
    export const AcademicCapIcon: DefineComponent<{}, {}, any>
    export const AdjustmentsIcon: DefineComponent<{}, {}, any>
    export const AnnotationIcon: DefineComponent<{}, {}, any>
    export const ArchiveIcon: DefineComponent<{}, {}, any>
    export const ArrowCircleDownIcon: DefineComponent<{}, {}, any>
    export const ArrowCircleLeftIcon: DefineComponent<{}, {}, any>
    export const ArrowCircleRightIcon: DefineComponent<{}, {}, any>
    export const ArrowCircleUpIcon: DefineComponent<{}, {}, any>
    export const ArrowDownIcon: DefineComponent<{}, {}, any>
    export const ArrowLeftIcon: DefineComponent<{}, {}, any>
    export const ArrowNarrowDownIcon: DefineComponent<{}, {}, any>
    export const ArrowNarrowLeftIcon: DefineComponent<{}, {}, any>
    export const ArrowNarrowRightIcon: DefineComponent<{}, {}, any>
    export const ArrowNarrowUpIcon: DefineComponent<{}, {}, any>
    export const ArrowRightIcon: DefineComponent<{}, {}, any>
    export const ArrowSmDownIcon: DefineComponent<{}, {}, any>
    export const ArrowSmLeftIcon: DefineComponent<{}, {}, any>
    export const ArrowSmRightIcon: DefineComponent<{}, {}, any>
    export const ArrowSmUpIcon: DefineComponent<{}, {}, any>
    export const ArrowUpIcon: DefineComponent<{}, {}, any>
    export const ArrowsExpandIcon: DefineComponent<{}, {}, any>
    export const AtSymbolIcon: DefineComponent<{}, {}, any>
    export const BackspaceIcon: DefineComponent<{}, {}, any>
    export const BadgeCheckIcon: DefineComponent<{}, {}, any>
    export const BanIcon: DefineComponent<{}, {}, any>
    export const BeakerIcon: DefineComponent<{}, {}, any>
    export const BellIcon: DefineComponent<{}, {}, any>
    export const BookOpenIcon: DefineComponent<{}, {}, any>
    export const BookmarkAltIcon: DefineComponent<{}, {}, any>
    export const BookmarkIcon: DefineComponent<{}, {}, any>
    export const BriefcaseIcon: DefineComponent<{}, {}, any>
    export const CakeIcon: DefineComponent<{}, {}, any>
    export const CalculatorIcon: DefineComponent<{}, {}, any>
    export const CalendarIcon: DefineComponent<{}, {}, any>
    export const CameraIcon: DefineComponent<{}, {}, any>
    export const CashIcon: DefineComponent<{}, {}, any>
    export const ChartBarIcon: DefineComponent<{}, {}, any>
    export const ChartPieIcon: DefineComponent<{}, {}, any>
    export const ChartSquareBarIcon: DefineComponent<{}, {}, any>
    export const ChatAlt2Icon: DefineComponent<{}, {}, any>
    export const ChatAltIcon: DefineComponent<{}, {}, any>
    export const ChatIcon: DefineComponent<{}, {}, any>
    export const CheckCircleIcon: DefineComponent<{}, {}, any>
    export const CheckIcon: DefineComponent<{}, {}, any>
    export const ChevronDoubleDownIcon: DefineComponent<{}, {}, any>
    export const ChevronDoubleLeftIcon: DefineComponent<{}, {}, any>
    export const ChevronDoubleRightIcon: DefineComponent<{}, {}, any>
    export const ChevronDoubleUpIcon: DefineComponent<{}, {}, any>
    export const ChevronDownIcon: DefineComponent<{}, {}, any>
    export const ChevronLeftIcon: DefineComponent<{}, {}, any>
    export const ChevronRightIcon: DefineComponent<{}, {}, any>
    export const ChevronUpIcon: DefineComponent<{}, {}, any>
    export const ChipIcon: DefineComponent<{}, {}, any>
    export const ClipboardCheckIcon: DefineComponent<{}, {}, any>
    export const ClipboardCopyIcon: DefineComponent<{}, {}, any>
    export const ClipboardListIcon: DefineComponent<{}, {}, any>
    export const ClipboardIcon: DefineComponent<{}, {}, any>
    export const ClockIcon: DefineComponent<{}, {}, any>
    export const CloudDownloadIcon: DefineComponent<{}, {}, any>
    export const CloudUploadIcon: DefineComponent<{}, {}, any>
    export const CloudIcon: DefineComponent<{}, {}, any>
    export const CodeIcon: DefineComponent<{}, {}, any>
    export const CogIcon: DefineComponent<{}, {}, any>
    export const CollectionIcon: DefineComponent<{}, {}, any>
    export const ColorSwatchIcon: DefineComponent<{}, {}, any>
    export const CreditCardIcon: DefineComponent<{}, {}, any>
    export const CubeTransparentIcon: DefineComponent<{}, {}, any>
    export const CubeIcon: DefineComponent<{}, {}, any>
    export const CurrencyBangladeshiIcon: DefineComponent<{}, {}, any>
    export const CurrencyDollarIcon: DefineComponent<{}, {}, any>
    export const CurrencyEuroIcon: DefineComponent<{}, {}, any>
    export const CurrencyPoundIcon: DefineComponent<{}, {}, any>
    export const CurrencyRupeeIcon: DefineComponent<{}, {}, any>
    export const CurrencyYenIcon: DefineComponent<{}, {}, any>
    export const CursorClickIcon: DefineComponent<{}, {}, any>
    export const DatabaseIcon: DefineComponent<{}, {}, any>
    export const DesktopComputerIcon: DefineComponent<{}, {}, any>
    export const DeviceMobileIcon: DefineComponent<{}, {}, any>
    export const DeviceTabletIcon: DefineComponent<{}, {}, any>
    export const DocumentAddIcon: DefineComponent<{}, {}, any>
    export const DocumentDownloadIcon: DefineComponent<{}, {}, any>
    export const DocumentDuplicateIcon: DefineComponent<{}, {}, any>
    export const DocumentRemoveIcon: DefineComponent<{}, {}, any>
    export const DocumentReportIcon: DefineComponent<{}, {}, any>
    export const DocumentSearchIcon: DefineComponent<{}, {}, any>
    export const DocumentTextIcon: DefineComponent<{}, {}, any>
    export const DocumentIcon: DefineComponent<{}, {}, any>
    export const DotsCircleHorizontalIcon: DefineComponent<{}, {}, any>
    export const DotsHorizontalIcon: DefineComponent<{}, {}, any>
    export const DotsVerticalIcon: DefineComponent<{}, {}, any>
    export const DownloadIcon: DefineComponent<{}, {}, any>
    export const DuplicateIcon: DefineComponent<{}, {}, any>
    export const EmojiHappyIcon: DefineComponent<{}, {}, any>
    export const EmojiSadIcon: DefineComponent<{}, {}, any>
    export const ExclamationCircleIcon: DefineComponent<{}, {}, any>
    export const ExclamationIcon: DefineComponent<{}, {}, any>
    export const ExternalLinkIcon: DefineComponent<{}, {}, any>
    export const EyeOffIcon: DefineComponent<{}, {}, any>
    export const EyeIcon: DefineComponent<{}, {}, any>
    export const FastForwardIcon: DefineComponent<{}, {}, any>
    export const FilmIcon: DefineComponent<{}, {}, any>
    export const FilterIcon: DefineComponent<{}, {}, any>
    export const FingerPrintIcon: DefineComponent<{}, {}, any>
    export const FireIcon: DefineComponent<{}, {}, any>
    export const FlagIcon: DefineComponent<{}, {}, any>
    export const FolderAddIcon: DefineComponent<{}, {}, any>
    export const FolderDownloadIcon: DefineComponent<{}, {}, any>
    export const FolderOpenIcon: DefineComponent<{}, {}, any>
    export const FolderRemoveIcon: DefineComponent<{}, {}, any>
    export const FolderIcon: DefineComponent<{}, {}, any>
    export const GiftIcon: DefineComponent<{}, {}, any>
    export const GlobeAltIcon: DefineComponent<{}, {}, any>
    export const GlobeIcon: DefineComponent<{}, {}, any>
    export const HandIcon: DefineComponent<{}, {}, any>
    export const HashtagIcon: DefineComponent<{}, {}, any>
    export const HeartIcon: DefineComponent<{}, {}, any>
    export const HomeIcon: DefineComponent<{}, {}, any>
    export const IdentificationIcon: DefineComponent<{}, {}, any>
    export const InboxInIcon: DefineComponent<{}, {}, any>
    export const InboxIcon: DefineComponent<{}, {}, any>
    export const InformationCircleIcon: DefineComponent<{}, {}, any>
    export const KeyIcon: DefineComponent<{}, {}, any>
    export const LibraryIcon: DefineComponent<{}, {}, any>
    export const LightBulbIcon: DefineComponent<{}, {}, any>
    export const LightningBoltIcon: DefineComponent<{}, {}, any>
    export const LinkIcon: DefineComponent<{}, {}, any>
    export const LocationMarkerIcon: DefineComponent<{}, {}, any>
    export const LockClosedIcon: DefineComponent<{}, {}, any>
    export const LockOpenIcon: DefineComponent<{}, {}, any>
    export const LoginIcon: DefineComponent<{}, {}, any>
    export const LogoutIcon: DefineComponent<{}, {}, any>
    export const MailOpenIcon: DefineComponent<{}, {}, any>
    export const MailIcon: DefineComponent<{}, {}, any>
    export const MapIcon: DefineComponent<{}, {}, any>
    export const MenuAlt1Icon: DefineComponent<{}, {}, any>
    export const MenuAlt2Icon: DefineComponent<{}, {}, any>
    export const MenuAlt3Icon: DefineComponent<{}, {}, any>
    export const MenuAlt4Icon: DefineComponent<{}, {}, any>
    export const MenuIcon: DefineComponent<{}, {}, any>
    export const MicrophoneIcon: DefineComponent<{}, {}, any>
    export const MinusCircleIcon: DefineComponent<{}, {}, any>
    export const MinusSmIcon: DefineComponent<{}, {}, any>
    export const MinusIcon: DefineComponent<{}, {}, any>
    export const MoonIcon: DefineComponent<{}, {}, any>
    export const MusicNoteIcon: DefineComponent<{}, {}, any>
    export const NewspaperIcon: DefineComponent<{}, {}, any>
    export const OfficeBuildingIcon: DefineComponent<{}, {}, any>
    export const PaperAirplaneIcon: DefineComponent<{}, {}, any>
    export const PaperClipIcon: DefineComponent<{}, {}, any>
    export const PauseIcon: DefineComponent<{}, {}, any>
    export const PencilAltIcon: DefineComponent<{}, {}, any>
    export const PencilIcon: DefineComponent<{}, {}, any>
    export const PhoneIncomingIcon: DefineComponent<{}, {}, any>
    export const PhoneMissedCallIcon: DefineComponent<{}, {}, any>
    export const PhoneOutgoingIcon: DefineComponent<{}, {}, any>
    export const PhoneIcon: DefineComponent<{}, {}, any>
    export const PhotographIcon: DefineComponent<{}, {}, any>
    export const PlayIcon: DefineComponent<{}, {}, any>
    export const PlusCircleIcon: DefineComponent<{}, {}, any>
    export const PlusSmIcon: DefineComponent<{}, {}, any>
    export const PlusIcon: DefineComponent<{}, {}, any>
    export const PresentationChartBarIcon: DefineComponent<{}, {}, any>
    export const PresentationChartLineIcon: DefineComponent<{}, {}, any>
    export const PrinterIcon: DefineComponent<{}, {}, any>
    export const PuzzleIcon: DefineComponent<{}, {}, any>
    export const QrcodeIcon: DefineComponent<{}, {}, any>
    export const QuestionMarkCircleIcon: DefineComponent<{}, {}, any>
    export const ReceiptRefundIcon: DefineComponent<{}, {}, any>
    export const ReceiptTaxIcon: DefineComponent<{}, {}, any>
    export const RefreshIcon: DefineComponent<{}, {}, any>
    export const ReplyIcon: DefineComponent<{}, {}, any>
    export const RewindIcon: DefineComponent<{}, {}, any>
    export const RssIcon: DefineComponent<{}, {}, any>
    export const SaveAsIcon: DefineComponent<{}, {}, any>
    export const SaveIcon: DefineComponent<{}, {}, any>
    export const ScaleIcon: DefineComponent<{}, {}, any>
    export const ScissorsIcon: DefineComponent<{}, {}, any>
    export const SearchCircleIcon: DefineComponent<{}, {}, any>
    export const SearchIcon: DefineComponent<{}, {}, any>
    export const SelectorIcon: DefineComponent<{}, {}, any>
    export const ServerIcon: DefineComponent<{}, {}, any>
    export const ShareIcon: DefineComponent<{}, {}, any>
    export const ShieldCheckIcon: DefineComponent<{}, {}, any>
    export const ShieldExclamationIcon: DefineComponent<{}, {}, any>
    export const ShoppingBagIcon: DefineComponent<{}, {}, any>
    export const ShoppingCartIcon: DefineComponent<{}, {}, any>
    export const SortAscendingIcon: DefineComponent<{}, {}, any>
    export const SortDescendingIcon: DefineComponent<{}, {}, any>
    export const SparklesIcon: DefineComponent<{}, {}, any>
    export const SpeakerphoneIcon: DefineComponent<{}, {}, any>
    export const StarIcon: DefineComponent<{}, {}, any>
    export const StatusOfflineIcon: DefineComponent<{}, {}, any>
    export const StatusOnlineIcon: DefineComponent<{}, {}, any>
    export const StopIcon: DefineComponent<{}, {}, any>
    export const SunIcon: DefineComponent<{}, {}, any>
    export const SupportIcon: DefineComponent<{}, {}, any>
    export const SwitchHorizontalIcon: DefineComponent<{}, {}, any>
    export const SwitchVerticalIcon: DefineComponent<{}, {}, any>
    export const TableIcon: DefineComponent<{}, {}, any>
    export const TagIcon: DefineComponent<{}, {}, any>
    export const TemplateIcon: DefineComponent<{}, {}, any>
    export const TerminalIcon: DefineComponent<{}, {}, any>
    export const ThumbDownIcon: DefineComponent<{}, {}, any>
    export const ThumbUpIcon: DefineComponent<{}, {}, any>
    export const TicketIcon: DefineComponent<{}, {}, any>
    export const TranslateIcon: DefineComponent<{}, {}, any>
    export const TrashIcon: DefineComponent<{}, {}, any>
    export const TrendingDownIcon: DefineComponent<{}, {}, any>
    export const TrendingUpIcon: DefineComponent<{}, {}, any>
    export const TruckIcon: DefineComponent<{}, {}, any>
    export const UploadIcon: DefineComponent<{}, {}, any>
    export const UserAddIcon: DefineComponent<{}, {}, any>
    export const UserCircleIcon: DefineComponent<{}, {}, any>
    export const UserGroupIcon: DefineComponent<{}, {}, any>
    export const UserRemoveIcon: DefineComponent<{}, {}, any>
    export const UserIcon: DefineComponent<{}, {}, any>
    export const UsersIcon: DefineComponent<{}, {}, any>
    export const VariableIcon: DefineComponent<{}, {}, any>
    export const VideoCameraIcon: DefineComponent<{}, {}, any>
    export const ViewBoardsIcon: DefineComponent<{}, {}, any>
    export const ViewGridAddIcon: DefineComponent<{}, {}, any>
    export const ViewGridIcon: DefineComponent<{}, {}, any>
    export const ViewListIcon: DefineComponent<{}, {}, any>
    export const VolumeOffIcon: DefineComponent<{}, {}, any>
    export const VolumeUpIcon: DefineComponent<{}, {}, any>
    export const WifiIcon: DefineComponent<{}, {}, any>
    export const XCircleIcon: DefineComponent<{}, {}, any>
    export const XIcon: DefineComponent<{}, {}, any>
    export const ZoomInIcon: DefineComponent<{}, {}, any>
    export const ZoomOutIcon: DefineComponent<{}, {}, any>
}

[jsmith]

@deadcoder0904 the last time I checked, @heroicons/react already has types defined in the npm package :)

[deadcoder0904]

@jsmith I was getting errors because I was importing @heroicons/react & not @heroicons/react/outline. This issue should be closed or at least changed to mention Vue :)

[koodeau]

@jsmith I was getting errors because I was importing @heroicons/react & not @heroicons/react/outline. This issue should be closed or at least changed to mention Vue :)

Well, it is not working with Typescript:

[ ERROR ]  TypeScript: ./node_modules/@heroicons/react/outline/BackspaceIcon.d.ts:2:69
           Cannot find namespace 'JSX'.

      L1:  import * as React from 'react';
      L2:  declare function BackspaceIcon(props: React.ComponentProps<'svg'>): JSX.Element;
      L3:  export default BackspaceIcon;

[deadcoder0904]

@koodeau It works perfectly fine :)

[bradlc]

I'm going to close this as the React module now has TypeScript types. If you're having specific issues with those please open a new issue with a minimal reproduction ❤️

[jeghaire]

Heroicon types were changed in 2.0.17. Per regarding the icons type signature #981, the correct way to type icons is now one of

type Icon = React.FC<Parameters[0]> or

type IconSVGProps = React.PropsWithoutRef<React.SVGProps> & React.RefAttributes type IconProps = IconSVGProps & { title?: string titleId?: string }

type Icon = React.FC

[abdessamadely]

In version 2 you import it like:

import {  HomeIcon } from '@heroicons/react/24/solid'

[wcheek]

For Vue users, I was able to type these icons like this:

import type { FunctionalComponent, HTMLAttributes, VNodeProps } from "vue";
import { HomeIcon } from "@heroicons/vue/24/solid";

// HomeIcon: FunctionalComponent<HTMLAttributes & VNodeProps>

[molavec]

In Visual Studio the problem persists with TypeScript. I solved adding types path in tsconfig.json.

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "../../node_modules/@heroicons/**/*.d.ts"
    ]
  },
 ...
}

[key60529]

For Vue users, I was able to type these icons like this:

import type { FunctionalComponent, HTMLAttributes, VNodeProps } from "vue";
import { HomeIcon } from "@heroicons/vue/24/solid";

// HomeIcon: FunctionalComponent<HTMLAttributes & VNodeProps>

You saved my day 😍

[ivandamyanov]

In React + Typescript, if I'd like to load an icon, i.e. import { HomeIcon } from "@heroicons/vue/24/solid"; and then pass it to a custom component as a prop like Icon={<HomeIcon />} What type should my Icon prop be? I tried all kinds of solutions and none of them worked so far. One of the solutions was a type export type HeroIcon = (props: React.ComponentProps<'svg'>) => JSX.Element; but when I pass the icon there's an error.

[abdessamadely]

@ivandamyanov I think you can treat it like {children}, so. Something like {icon: ReactNode} then {icon} should work.