Fix TypeScript types

.gitignore

@@ -5,6 +5,5 @@ node_modules/
 .vercel/
 yarn-error.log
 generate.js
-src/index.ts
 src/**.js
 src/components/

generate.ts

@@ -3,59 +3,67 @@ const fs = require('fs')
 // const { renderToStaticMarkup: dom } = require('react-dom/server')
 const jsxToString = require('jsx-to-string')
 
-const generateComponent = (name: string, children: string): string =>`import React from 'react'
-
-function ${name}<T extends React.ElementType = 'svg'>({
-  as: Component = 'svg',
-  size = 32,
-  ...props
-}: Props<T> & React.ComponentPropsWithoutRef<T>) {
-  return (
-    <Component
-      fillRule="evenodd"
-      clipRule="evenodd"
-      strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-label={glyph}
-      viewBox="0 0 32 32"
-      preserveAspectRatio="xMidYMid meet"
-      fill="currentColor"
-      width={size}
-      height={size}
-      role="img"
-      {...props}
-    >
-      ${children}
-    </Component>
-  )
-}
-
-export default ${name}
-`
-
 const glyphNames = Object.keys(glyphs)
 const componentize = (key: string): string =>
   key
     .split('-')
     .map(s => s[0].toUpperCase() + s.substr(1).toLowerCase())
     .join('')
+const labelize = (key: string): string =>
+  key.replace('-fill', '').replace('view-', '').replace('-', ' ') + ' icon'
+
+const generateComponent = (
+  glyph: string,
+  component: string,
+  children: string,
+): string => `import * as React from 'react'
+
+const ${component} = ({
+  as: Component = 'svg',
+  size = 32,
+  ...props
+}: React.SVGProps<SVGSVGElement> & {
+  as?: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>> | string,
+  size?: number | string
+}) => (
+  <Component
+    fillRule="evenodd"
+    clipRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="1.414"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    preserveAspectRatio="xMidYMid meet"
+    fill="currentColor"
+    width={size}
+    height={size}
+    aria-label="${labelize(glyph)}"
+    role="img"
+    {...props}
+  >
+    ${children}
+  </Component>
+)
+
+export default ${component}
+`
 
 glyphNames.forEach((key: string) => {
   const name = componentize(key)
   const children = jsxToString(glyphs[key])
-  const file = generateComponent(name, children)
-  fs.writeFile(`./src/components/${key}.ts`, file, err => {
+  const file = generateComponent(key, name, children)
+  fs.writeFile(`./src/components/${key}.tsx`, file, err => {
     if (err) return console.error('ur a bad person :(', err)
   })
 })
 
 const glyphExports = glyphNames
   .map(g => `export { default as ${componentize(g)} } from './components/${g}'`)
   .join('\n')
-const indexFile = `
-export { default } from './icon'
+const indexFile = `export { default } from './icon'
 export { glyphNames } from './glyphs'
+
+// these files are generated at build & gitignored
 ${glyphExports}
 `
 fs.writeFile('./src/index.ts', indexFile, err => console.log(err))

src/icon.tsx

@@ -1,36 +1,32 @@
 import React from 'react'
 import glyphs from './glyphs'
 
-type Props<T> = {
-  is?: Function | T | string
-  glyph?: keyof typeof glyphs
-  size?: number
-}
-
-function Icon<T extends React.ElementType = 'svg'>({
+const Icon = ({
+  glyph = 'like',
   as: Component = 'svg',
   size = 32,
-  glyph = 'like',
   ...props
-}: Props<T> & React.ComponentPropsWithoutRef<T>) {
-  return (
-    <Component
-      fillRule="evenodd"
-      clipRule="evenodd"
-      strokeLinejoin="round"
-      strokeMiterlimit="1.414"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-label={glyph}
-      viewBox="0 0 32 32"
-      preserveAspectRatio="xMidYMid meet"
-      fill="currentColor"
-      width={size}
-      height={size}
-      role="img"
-      children={glyphs[glyph as keyof typeof glyphs]}
-      {...props}
-    />
-  )
-}
+}: React.SVGProps<SVGSVGElement> & {
+  glyph?: keyof typeof glyphs
+  as?: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>> | string
+  size?: number | string
+}) => (
+  <Component
+    fillRule="evenodd"
+    clipRule="evenodd"
+    strokeLinejoin="round"
+    strokeMiterlimit="1.414"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-label={glyph}
+    viewBox="0 0 32 32"
+    preserveAspectRatio="xMidYMid meet"
+    fill="currentColor"
+    width={size}
+    height={size}
+    role="img"
+    children={glyphs[glyph as keyof typeof glyphs]}
+    {...props}
+  />
+)
 
 export default Icon

src/index.ts

@@ -0,0 +1,204 @@
+export { default } from './icon'
+export { glyphNames } from './glyphs'
+
+// these files are generated at build & gitignored
+export { default as Analytics } from './components/analytics'
+export { default as Announcement } from './components/announcement'
+export { default as Attachment } from './components/attachment'
+export { default as Bug } from './components/bug'
+export { default as BugFill } from './components/bug-fill'
+export { default as Channel } from './components/channel'
+export { default as ChannelPrivate } from './components/channel-private'
+export { default as Checkbox } from './components/checkbox'
+export { default as Checkmark } from './components/checkmark'
+export { default as Code } from './components/code'
+export { default as Community } from './components/community'
+export { default as Controls } from './components/controls'
+export { default as Copy } from './components/copy'
+export { default as CopyCheck } from './components/copy-check'
+export { default as Delete } from './components/delete'
+export { default as DoorEnter } from './components/door-enter'
+export { default as DoorLeave } from './components/door-leave'
+export { default as Down } from './components/down'
+export { default as DownCaret } from './components/down-caret'
+export { default as RightCaret } from './components/right-caret'
+export { default as DownFill } from './components/down-fill'
+export { default as Edit } from './components/edit'
+export { default as Email } from './components/email'
+export { default as EmailFill } from './components/email-fill'
+export { default as Embed } from './components/embed'
+export { default as Emoji } from './components/emoji'
+export { default as Enter } from './components/enter'
+export { default as Everything } from './components/everything'
+export { default as Expand } from './components/expand'
+export { default as Explore } from './components/explore'
+export { default as Facebook } from './components/facebook'
+export { default as FacebookFill } from './components/facebook-fill'
+export { default as Flag } from './components/flag'
+export { default as FlagFill } from './components/flag-fill'
+export { default as Freeze } from './components/freeze'
+export { default as Friend } from './components/friend'
+export { default as Github } from './components/github'
+export { default as Google } from './components/google'
+export { default as GithubFill } from './components/github-fill'
+export { default as GoogleFill } from './components/google-fill'
+export { default as Home } from './components/home'
+export { default as Idea } from './components/idea'
+export { default as Inserter } from './components/inserter'
+export { default as Like } from './components/like'
+export { default as LikeFill } from './components/like-fill'
+export { default as Link } from './components/link'
+export { default as MapPin } from './components/map-pin'
+export { default as MapApp } from './components/map-app'
+export { default as Markdown } from './components/markdown'
+export { default as MemberAdd } from './components/member-add'
+export { default as MemberRemove } from './components/member-remove'
+export { default as Mention } from './components/mention'
+export { default as Menu } from './components/menu'
+export { default as Message } from './components/message'
+export { default as MessageSimple } from './components/message-simple'
+export { default as MessageFill } from './components/message-fill'
+export { default as MessageNew } from './components/message-new'
+export { default as MessageSimpleNew } from './components/message-simple-new'
+export { default as Minus } from './components/minus'
+export { default as MinusFill } from './components/minus-fill'
+export { default as Moon } from './components/moon'
+export { default as MoonFill } from './components/moon-fill'
+export { default as Mute } from './components/mute'
+export { default as Notification } from './components/notification'
+export { default as NotificationFill } from './components/notification-fill'
+export { default as Person } from './components/person'
+export { default as PersonCard } from './components/person-card'
+export { default as Phone } from './components/phone'
+export { default as PhoneVibrate } from './components/phone-vibrate'
+export { default as PhoneBolt } from './components/phone-bolt'
+export { default as Photo } from './components/photo'
+export { default as PhotoFill } from './components/photo-fill'
+export { default as Pin } from './components/pin'
+export { default as PinFill } from './components/pin-fill'
+export { default as Plus } from './components/plus'
+export { default as PlusFill } from './components/plus-fill'
+export { default as Post } from './components/post'
+export { default as PostCancel } from './components/post-cancel'
+export { default as PostFill } from './components/post-fill'
+export { default as Private } from './components/private'
+export { default as PrivateOutline } from './components/private-outline'
+export { default as PrivateUnlocked } from './components/private-unlocked'
+export { default as Profile } from './components/profile'
+export { default as ProfileFill } from './components/profile-fill'
+export { default as Quote } from './components/quote'
+export { default as Rep } from './components/rep'
+export { default as Reply } from './components/reply'
+export { default as Forward } from './components/forward'
+export { default as Sam } from './components/sam'
+export { default as Search } from './components/search'
+export { default as Send } from './components/send'
+export { default as SendFill } from './components/send-fill'
+export { default as Settings } from './components/settings'
+export { default as Share } from './components/share'
+export { default as Support } from './components/support'
+export { default as SupportFill } from './components/support-fill'
+export { default as Thread } from './components/thread'
+export { default as Thumbsdown } from './components/thumbsdown'
+export { default as ThumbsdownFill } from './components/thumbsdown-fill'
+export { default as Thumbsup } from './components/thumbsup'
+export { default as ThumbsupFill } from './components/thumbsup-fill'
+export { default as Twitter } from './components/twitter'
+export { default as TwitterFill } from './components/twitter-fill'
+export { default as Tv } from './components/tv'
+export { default as TvFill } from './components/tv-fill'
+export { default as Up } from './components/up'
+export { default as UpFill } from './components/up-fill'
+export { default as View } from './components/view'
+export { default as ViewFill } from './components/view-fill'
+export { default as ViewHide } from './components/view-hide'
+export { default as ViewBack } from './components/view-back'
+export { default as ViewClose } from './components/view-close'
+export { default as ViewCloseSmall } from './components/view-close-small'
+export { default as ViewForward } from './components/view-forward'
+export { default as ViewReload } from './components/view-reload'
+export { default as Welcome } from './components/welcome'
+export { default as Back } from './components/back'
+export { default as Bank } from './components/bank'
+export { default as Card } from './components/card'
+export { default as CardAdd } from './components/card-add'
+export { default as Clock } from './components/clock'
+export { default as ClockFill } from './components/clock-fill'
+export { default as Cloud } from './components/cloud'
+export { default as CloudDownload } from './components/cloud-download'
+export { default as CloudUpload } from './components/cloud-upload'
+export { default as Docs } from './components/docs'
+export { default as DocsFill } from './components/docs-fill'
+export { default as EventAdd } from './components/event-add'
+export { default as EventCancel } from './components/event-cancel'
+export { default as EventCheck } from './components/event-check'
+export { default as EventCode } from './components/event-code'
+export { default as EventLike } from './components/event-like'
+export { default as EventMove } from './components/event-move'
+export { default as External } from './components/external'
+export { default as ExternalFill } from './components/external-fill'
+export { default as Figma } from './components/figma'
+export { default as FigmaFill } from './components/figma-fill'
+export { default as Filter } from './components/filter'
+export { default as FilterFill } from './components/filter-fill'
+export { default as History } from './components/history'
+export { default as Important } from './components/important'
+export { default as ImportantFill } from './components/important-fill'
+export { default as Medium } from './components/medium'
+export { default as MediumFill } from './components/medium-fill'
+export { default as Instagram } from './components/instagram'
+export { default as InstagramFill } from './components/instagram-fill'
+export { default as MessageSimpleFill } from './components/message-simple-fill'
+export { default as Payment } from './components/payment'
+export { default as PaymentDocs } from './components/payment-docs'
+export { default as PaymentTransfer } from './components/payment-transfer'
+export { default as Bag } from './components/bag'
+export { default as BagAdd } from './components/bag-add'
+export { default as BagFill } from './components/bag-fill'
+export { default as BagRemove } from './components/bag-remove'
+export { default as Shirt } from './components/shirt'
+export { default as ShirtFill } from './components/shirt-fill'
+export { default as UpCaret } from './components/up-caret'
+export { default as Youtube } from './components/youtube'
+export { default as YoutubeFill } from './components/youtube-fill'
+export { default as ZoomIn } from './components/zoom-in'
+export { default as ZoomOut } from './components/zoom-out'
+export { default as AdminBadge } from './components/admin-badge'
+export { default as Admin } from './components/admin'
+export { default as AlignCenter } from './components/align-center'
+export { default as AlignLeft } from './components/align-left'
+export { default as AlignRight } from './components/align-right'
+export { default as BatteryBolt } from './components/battery-bolt'
+export { default as BatteryFill } from './components/battery-fill'
+export { default as Battery } from './components/battery'
+export { default as BoltCircle } from './components/bolt-circle'
+export { default as BoltDocs } from './components/bolt-docs'
+export { default as Bolt } from './components/bolt'
+export { default as Briefcase } from './components/briefcase'
+export { default as Compass } from './components/compass'
+export { default as Crosshairs } from './components/crosshairs'
+export { default as Food } from './components/food'
+export { default as Forbidden } from './components/forbidden'
+export { default as Grid } from './components/grid'
+export { default as Help } from './components/help'
+export { default as Info } from './components/info'
+export { default as Leader } from './components/leader'
+export { default as List } from './components/list'
+export { default as Meh } from './components/meh'
+export { default as MessengerFill } from './components/messenger-fill'
+export { default as Messenger } from './components/messenger'
+export { default as MoreFill } from './components/more-fill'
+export { default as More } from './components/more'
+export { default as Relaxed } from './components/relaxed'
+export { default as Rss } from './components/rss'
+export { default as Sad } from './components/sad'
+export { default as Channels } from './components/channels'
+export { default as Slack } from './components/slack'
+export { default as SlackFill } from './components/slack-fill'
+export { default as Sticker } from './components/sticker'
+export { default as Terminal } from './components/terminal'
+export { default as Transactions } from './components/transactions'
+export { default as Twitch } from './components/twitch'
+export { default as TwitchFill } from './components/twitch-fill'
+export { default as Web } from './components/web'
+export { default as Wifi } from './components/wifi'