Typescript typing #64

marcospassos · 2020-06-18T13:34:58Z

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 · 2020-07-13T20:22:40Z

@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 · 2020-07-13T21:19:48Z

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 · 2020-07-13T21:29:25Z

@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 · 2020-07-13T22:06:00Z

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 · 2020-07-13T23:23:50Z

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 · 2021-03-31T14:33:12Z

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

jsmith · 2021-03-31T22:08:43Z

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

Penguinlay · 2021-04-03T14:40:15Z

@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 · 2021-04-03T16:15:58Z

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

jtc42 · 2021-04-12T14:55:46Z

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

jssblck · 2021-04-17T02:45:25Z

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 · 2021-04-17T12:57:41Z

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

rynz · 2021-04-19T01:39:39Z

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

GTB3NW · 2021-04-20T16:41:41Z

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 · 2021-05-03T09:03:55Z

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

noahgary · 2021-06-10T19:33:42Z

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 · 2021-06-11T00:13:38Z

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 · 2021-06-15T19:42:50Z

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 · 2021-07-10T23:41:23Z

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 · 2021-07-23T13:12:01Z

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 · 2021-07-23T14:59:26Z

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

deadcoder0904 · 2021-07-23T15:29:23Z

@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 · 2021-08-08T15:58:13Z

@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 · 2021-08-09T07:08:39Z

@koodeau It works perfectly fine :)

bradlc · 2021-10-22T15:38:24Z

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 · 2023-08-01T09:10:43Z

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 · 2023-08-15T20:25:25Z

In version 2 you import it like:

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

wcheek · 2023-10-11T08:17:22Z

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 · 2023-10-19T15:44:51Z

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

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

key60529 · 2023-10-23T09:37:19Z

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 · 2024-02-10T19:07:29Z

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 · 2024-02-10T20:56:32Z

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

9renpoto mentioned this issue Dec 1, 2020

chore: export type definitions react components #168

Closed

bradlc closed this as completed Oct 22, 2021

RobRoseKnows mentioned this issue Nov 3, 2021

Supertype for icons? #542

Closed

corysimmons mentioned this issue Sep 13, 2022

Typescript needs to export all icon names in one type #811

Closed

phix-o mentioned this issue Oct 19, 2022

Vue typescript support #863

Closed

angelhdzmultimedia mentioned this issue Jan 25, 2023

YouTube keeps deleting my comments! A list of changes and tips for the video insidewebdev/twitter-clone#5

Open

kohei-sa mentioned this issue Apr 12, 2023

ログイン/サインイン・ログアウト画面の実装 kohei-sa/u-fastapi-react#10

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Typescript typing #64

Typescript typing #64

marcospassos commented Jun 18, 2020

jlarmstrongiv commented Jul 13, 2020

jsmith commented Jul 13, 2020

jlarmstrongiv commented Jul 13, 2020

jsmith commented Jul 13, 2020

jlarmstrongiv commented Jul 13, 2020

aliataf commented Mar 31, 2021

jsmith commented Mar 31, 2021

Penguinlay commented Apr 3, 2021

jsmith commented Apr 3, 2021

jtc42 commented Apr 12, 2021

jssblck commented Apr 17, 2021

jsmith commented Apr 17, 2021

rynz commented Apr 19, 2021

GTB3NW commented Apr 20, 2021

Niscolinx commented May 3, 2021

noahgary commented Jun 10, 2021

jsmith commented Jun 11, 2021

noahgary commented Jun 15, 2021

colq2 commented Jul 10, 2021

deadcoder0904 commented Jul 23, 2021

jsmith commented Jul 23, 2021

deadcoder0904 commented Jul 23, 2021

koodeau commented Aug 8, 2021

deadcoder0904 commented Aug 9, 2021

bradlc commented Oct 22, 2021

jeghaire commented Aug 1, 2023

abdessamadely commented Aug 15, 2023

wcheek commented Oct 11, 2023

molavec commented Oct 19, 2023 •

edited

Loading

key60529 commented Oct 23, 2023 •

edited

Loading

ivandamyanov commented Feb 10, 2024

abdessamadely commented Feb 10, 2024

Typescript typing #64

Typescript typing #64

Comments

marcospassos commented Jun 18, 2020

jlarmstrongiv commented Jul 13, 2020

jsmith commented Jul 13, 2020

jlarmstrongiv commented Jul 13, 2020

jsmith commented Jul 13, 2020

jlarmstrongiv commented Jul 13, 2020

aliataf commented Mar 31, 2021

jsmith commented Mar 31, 2021

Penguinlay commented Apr 3, 2021

jsmith commented Apr 3, 2021

jtc42 commented Apr 12, 2021

jssblck commented Apr 17, 2021

jsmith commented Apr 17, 2021

rynz commented Apr 19, 2021

GTB3NW commented Apr 20, 2021

Niscolinx commented May 3, 2021

noahgary commented Jun 10, 2021

jsmith commented Jun 11, 2021

noahgary commented Jun 15, 2021

colq2 commented Jul 10, 2021

deadcoder0904 commented Jul 23, 2021

jsmith commented Jul 23, 2021

deadcoder0904 commented Jul 23, 2021

koodeau commented Aug 8, 2021

deadcoder0904 commented Aug 9, 2021

bradlc commented Oct 22, 2021

jeghaire commented Aug 1, 2023

abdessamadely commented Aug 15, 2023

wcheek commented Oct 11, 2023

molavec commented Oct 19, 2023 • edited Loading

key60529 commented Oct 23, 2023 • edited Loading

ivandamyanov commented Feb 10, 2024

abdessamadely commented Feb 10, 2024

molavec commented Oct 19, 2023 •

edited

Loading

key60529 commented Oct 23, 2023 •

edited

Loading