fix svgo + vite config

packages/components/svgo.spec.ts

@@ -1,22 +1,17 @@
-import {
+const {
   removeRootSVGElement,
   replaceAttrKeys,
   replaceColor,
   replaceId,
-} from "./svgoUtils"
+} = require("./svgoUtils")
 
-export type SVGOItem = {
+type SVGOItem = {
   type: "element"
   name: string
   attributes: { [key: string]: string }
   children: SVGOItem[]
 }
 
-export type RootItem = {
-  type: string
-  children: SVGOItem[]
-}
-
 describe("removeRootSVGElement", () => {
   const svgChildren: SVGOItem[] = [
     {
@@ -40,7 +35,7 @@ describe("removeRootSVGElement", () => {
   }
 
   it("Replaces the <svg> element with its children", () => {
-    const rootItem: RootItem = {
+    const rootItem = {
       type: "root",
       children: [svgElement],
     }

packages/components/svgoUtils.ts → packages/components/svgoUtils.js

@@ -1,10 +1,7 @@
 // Certain attributes work in html, but not React.
 // If an attribute needs to be converted to its React counterpart,
-
-import { RootItem, SVGOItem } from "./svgo.spec"
-
 // it can be added here.
-export const attrKeysToReplace = [
+const attrKeysToReplace = [
   {
     original: "xlink:href",
     replacement: "href",
@@ -35,7 +32,7 @@ export const attrKeysToReplace = [
   },
 ]
 
-export const replaceAttrKeys = (child: SVGOItem): void => {
+const replaceAttrKeys = child => {
   attrKeysToReplace.forEach(({ original, replacement }) => {
     if (child.attributes.hasOwnProperty(original)) {
       child.attributes[replacement] = child.attributes[original]
@@ -46,7 +43,7 @@ export const replaceAttrKeys = (child: SVGOItem): void => {
 
 // Figma/ Sketch don't allow us to set 'currentColor' when exporting SVGs.
 // We have a convention to export the color as #000 or #0000000, then change it here.
-export const replaceColor = (child: SVGOItem): void => {
+const replaceColor = child => {
   const hexCodesToReplace = [
     "#000",
     "#000000",
@@ -65,7 +62,7 @@ export const replaceColor = (child: SVGOItem): void => {
 // Ids aren't necessarily unique when coming from figma, causing
 // Icon components to reference different, already-rendered Icons
 // with duplicate ids. This function allows us to set unique ids.
-export const replaceId = (child: SVGOItem): void => {
+const replaceId = child => {
   if (child.attributes.id) {
     child.attributes.id = "UNIQUE_ID"
   }
@@ -76,7 +73,7 @@ export const replaceId = (child: SVGOItem): void => {
 
 // We remove the outermost <svg> element here, because we wrap its children in
 // our custom SVG component later
-export const removeRootSVGElement = (item: RootItem): void => {
+const removeRootSVGElement = item => {
   if (item.type !== "root") return
 
   const hasSingleSVGChild =
@@ -89,7 +86,7 @@ export const removeRootSVGElement = (item: RootItem): void => {
 
 // Recurses through all elements and child elements of root item
 // Note: first item is not an element, it's children are the elements.
-export const recurse = (item: RootItem): void => {
+const recurse = item => {
   item.children.forEach(child => {
     replaceAttrKeys(child)
     replaceColor(child)
@@ -98,3 +95,11 @@ export const recurse = (item: RootItem): void => {
     recurse(child)
   })
 }
+
+module.exports = {
+  recurse,
+  removeRootSVGElement,
+  replaceAttrKeys,
+  replaceColor,
+  replaceId,
+}

vite.config.ts

@@ -37,7 +37,7 @@ export default {
     ),
   },
   test: {
-    include: ["**/*.spec.ts?(x)", "!**/*.jest.spec.ts?(x)"],
+    include: ["**/*.spec.ts?(x)"],
     environment: "jsdom",
     globals: true,
     setupFiles: path.resolve(__dirname, "./vitest.setup.ts"),