diff --git a/packages/vx-glyph/package.json b/packages/vx-glyph/package.json
index 186ee4ff9..5aa7cebce 100644
--- a/packages/vx-glyph/package.json
+++ b/packages/vx-glyph/package.json
@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -33,9 +34,12 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/d3-shape": "^1.3.1",
+    "@types/react": "*",
     "@vx/group": "0.0.192",
     "classnames": "^2.2.5",
     "d3-shape": "^1.2.0",
diff --git a/packages/vx-glyph/src/glyphs/Glyph.jsx b/packages/vx-glyph/src/glyphs/Glyph.jsx
deleted file mode 100644
index 844b0b30d..000000000
--- a/packages/vx-glyph/src/glyphs/Glyph.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { Group } from '@vx/group';
-
-Glyph.propTypes = {
-  top: PropTypes.number,
-  left: PropTypes.number,
-  className: PropTypes.string,
-  children: PropTypes.any,
-};
-
-export default function Glyph({ top = 0, left = 0, className, children }) {
-  return (
-    <Group className={cx('vx-glyph', className)} top={top} left={left}>
-      {children}
-    </Group>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/Glyph.tsx b/packages/vx-glyph/src/glyphs/Glyph.tsx
new file mode 100644
index 000000000..1a25f4fd0
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/Glyph.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+import { Group } from '@vx/group';
+
+export type GlyphProps = {
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** classname to apply to glyph g element container. */
+  className?: string;
+  /** Children to render. */
+  children?: React.ReactNode;
+};
+
+export default function Glyph({ top = 0, left = 0, className, children }: GlyphProps) {
+  return (
+    <Group className={cx('vx-glyph', className)} top={top} left={left}>
+      {children}
+    </Group>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphCircle.jsx b/packages/vx-glyph/src/glyphs/GlyphCircle.jsx
deleted file mode 100644
index c6996b15a..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphCircle.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolCircle } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphCircle.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphCircle({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolCircle);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-circle', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphCircle.tsx b/packages/vx-glyph/src/glyphs/GlyphCircle.tsx
new file mode 100644
index 000000000..36ef1c2b9
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphCircle.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolCircle } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphCircleProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of circle in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphCircle<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphCircleProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphCircleProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolCircle);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-circle', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphCross.jsx b/packages/vx-glyph/src/glyphs/GlyphCross.jsx
deleted file mode 100644
index cf8467b3c..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphCross.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolCross } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphCross.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphCross({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolCross);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-cross', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphCross.tsx b/packages/vx-glyph/src/glyphs/GlyphCross.tsx
new file mode 100644
index 000000000..ab4353ad8
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphCross.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolCross } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphCrossProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of cross in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphCross<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphCrossProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphCrossProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolCross);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-cross', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphDiamond.jsx b/packages/vx-glyph/src/glyphs/GlyphDiamond.jsx
deleted file mode 100644
index 3ab4697ba..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphDiamond.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolDiamond } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphDiamond.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphDiamond({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolDiamond);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-diamond', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx b/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
new file mode 100644
index 000000000..082cd20d5
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphDiamond.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolDiamond } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphDiamondProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of diamond in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphDiamond<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphDiamondProps<Datum> &
+  Omit<React.SVGProps<SVGPathElement>, keyof GlyphDiamondProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolDiamond);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-diamond', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphDot.jsx b/packages/vx-glyph/src/glyphs/GlyphDot.jsx
deleted file mode 100644
index 2bd873134..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphDot.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import Glyph from './Glyph';
-
-GlyphDot.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-};
-
-export default function GlyphDot({ top = 0, left = 0, className, children, ...restProps }) {
-  return (
-    <Glyph top={top} left={left}>
-      <circle className={cx('vx-glyph-dot', className)} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphDot.tsx b/packages/vx-glyph/src/glyphs/GlyphDot.tsx
new file mode 100644
index 000000000..a7e436022
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphDot.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+import Glyph from './Glyph';
+
+export type GlyphDotProps = {
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Radius of dot. */
+  r?: number;
+  /** x coordinate of the center of the dot. */
+  cx?: number;
+  /** y coordinate of the center of the dot. */
+  cy?: number;
+};
+
+export default function GlyphDot({
+  top = 0,
+  left = 0,
+  className,
+  ...restProps
+}: GlyphDotProps & Omit<React.SVGProps<SVGCircleElement>, keyof GlyphDotProps>) {
+  return (
+    <Glyph top={top} left={left}>
+      <circle className={cx('vx-glyph-dot', className)} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphSquare.jsx b/packages/vx-glyph/src/glyphs/GlyphSquare.jsx
deleted file mode 100644
index b1fe362e8..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphSquare.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolSquare } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphSquare.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphSquare({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolSquare);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-square', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphSquare.tsx b/packages/vx-glyph/src/glyphs/GlyphSquare.tsx
new file mode 100644
index 000000000..e2a2915e8
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphSquare.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolSquare } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphSquareProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of square in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphSquare<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphSquareProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphSquareProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolSquare);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-square', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphStar.jsx b/packages/vx-glyph/src/glyphs/GlyphStar.jsx
deleted file mode 100644
index 5055a9d0d..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphStar.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolStar } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphStar.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphStar({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolStar);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-star', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphStar.tsx b/packages/vx-glyph/src/glyphs/GlyphStar.tsx
new file mode 100644
index 000000000..278d4a049
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphStar.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolStar } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphStarProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of star in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphStar<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphStarProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphStarProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolStar);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-star', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphTriangle.jsx b/packages/vx-glyph/src/glyphs/GlyphTriangle.jsx
deleted file mode 100644
index d3a901bb2..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphTriangle.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolTriangle } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphTriangle.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphTriangle({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolTriangle);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-triangle', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx b/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
new file mode 100644
index 000000000..a5a01db21
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphTriangle.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolTriangle } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphTriangleProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of triangle in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphTriangle<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphTriangleProps<Datum> &
+  Omit<React.SVGProps<SVGPathElement>, keyof GlyphTriangleProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolTriangle);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-triangle', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/glyphs/GlyphWye.jsx b/packages/vx-glyph/src/glyphs/GlyphWye.jsx
deleted file mode 100644
index 9c5ba2903..000000000
--- a/packages/vx-glyph/src/glyphs/GlyphWye.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { symbol, symbolWye } from 'd3-shape';
-import Glyph from './Glyph';
-
-GlyphWye.propTypes = {
-  children: PropTypes.func,
-  className: PropTypes.string,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-};
-
-export default function GlyphWye({ children, className, top, left, size, ...restProps }) {
-  const path = symbol();
-  path.type(symbolWye);
-  if (size) path.size(size);
-  if (children) return children({ path });
-  return (
-    <Glyph top={top} left={left}>
-      <path className={cx('vx-glyph-wye', className)} d={path()} {...restProps} />
-    </Glyph>
-  );
-}
diff --git a/packages/vx-glyph/src/glyphs/GlyphWye.tsx b/packages/vx-glyph/src/glyphs/GlyphWye.tsx
new file mode 100644
index 000000000..65faca813
--- /dev/null
+++ b/packages/vx-glyph/src/glyphs/GlyphWye.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import cx from 'classnames';
+import { Symbol, symbol, symbolWye } from 'd3-shape';
+import Glyph from './Glyph';
+
+export type GlyphWyeProps<Datum> = {
+  /** Render function override which is passed the configured path generator. */
+  children?: ({ path }: { path: Symbol<any, Datum> }) => React.ReactNode;
+  /** classname to apply to glyph path element. */
+  className?: string;
+  /** Top offset to apply to glyph g element container. */
+  top?: number;
+  /** Left offset to apply to glyph g element container. */
+  left?: number;
+  /** Size of wye glyph in px, or an accessor which takes Datum as input and returns a size. */
+  size?: number | ((d: Datum) => number);
+};
+
+export default function GlyphWye<Datum = any>({
+  children,
+  className,
+  top,
+  left,
+  size,
+  ...restProps
+}: GlyphWyeProps<Datum> & Omit<React.SVGProps<SVGPathElement>, keyof GlyphWyeProps<Datum>>) {
+  const path = symbol<Datum>();
+  path.type(symbolWye);
+
+  // TS can't differentiate the method overload here
+  if (typeof size === 'number') path.size(size);
+  else if (size) path.size(size);
+
+  if (children) return <>{children({ path })}</>;
+  return (
+    <Glyph top={top} left={left}>
+      <path className={cx('vx-glyph-wye', className)} d={path() || ''} {...restProps} />
+    </Glyph>
+  );
+}
diff --git a/packages/vx-glyph/src/index.js b/packages/vx-glyph/src/index.ts
similarity index 100%
rename from packages/vx-glyph/src/index.js
rename to packages/vx-glyph/src/index.ts
diff --git a/packages/vx-glyph/test/Circle.test.jsx b/packages/vx-glyph/test/Circle.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Circle.test.jsx
rename to packages/vx-glyph/test/Circle.test.tsx
diff --git a/packages/vx-glyph/test/Cross.test.jsx b/packages/vx-glyph/test/Cross.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Cross.test.jsx
rename to packages/vx-glyph/test/Cross.test.tsx
diff --git a/packages/vx-glyph/test/Diamond.test.jsx b/packages/vx-glyph/test/Diamond.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Diamond.test.jsx
rename to packages/vx-glyph/test/Diamond.test.tsx
diff --git a/packages/vx-glyph/test/Dot.test.jsx b/packages/vx-glyph/test/Dot.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Dot.test.jsx
rename to packages/vx-glyph/test/Dot.test.tsx
diff --git a/packages/vx-glyph/test/Glyph.test.jsx b/packages/vx-glyph/test/Glyph.test.tsx
similarity index 86%
rename from packages/vx-glyph/test/Glyph.test.jsx
rename to packages/vx-glyph/test/Glyph.test.tsx
index 6f316cf2e..3cd356f34 100644
--- a/packages/vx-glyph/test/Glyph.test.jsx
+++ b/packages/vx-glyph/test/Glyph.test.tsx
@@ -20,6 +20,6 @@ describe('<Glyph />', () => {
 
   test('it should take top,left number props', () => {
     const wrapper = render(<Glyph top={2} left={2} />);
-    expect(wrapper['0'].attribs.transform).toBe('translate(2, 2)');
+    expect(wrapper[0].attribs.transform as string).toBe('translate(2, 2)');
   });
 });
diff --git a/packages/vx-glyph/test/Square.test.jsx b/packages/vx-glyph/test/Square.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Square.test.jsx
rename to packages/vx-glyph/test/Square.test.tsx
diff --git a/packages/vx-glyph/test/Star.test.jsx b/packages/vx-glyph/test/Star.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Star.test.jsx
rename to packages/vx-glyph/test/Star.test.tsx
diff --git a/packages/vx-glyph/test/Triangle.test.jsx b/packages/vx-glyph/test/Triangle.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Triangle.test.jsx
rename to packages/vx-glyph/test/Triangle.test.tsx
diff --git a/packages/vx-glyph/test/Wye.test.jsx b/packages/vx-glyph/test/Wye.test.tsx
similarity index 100%
rename from packages/vx-glyph/test/Wye.test.jsx
rename to packages/vx-glyph/test/Wye.test.tsx