Icons broken when using Nuxt

[MalachiDraven]

Reproduction

https://github.com/MalachiDraven/Nuxt_FormKit_BrokenIcons

Describe the bug

The prefix, suffix, and other icons are broken when using Nuxt (@formkit/nuxt). They're gigantic lol.

My site:

app.vue:

<template>
  <div>
    <h1>Hello World!</h1>
    <FormKit type="text" prefix-icon="eye" name="password" />
  </div>
</template>

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: ['@formkit/nuxt'],
})

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@formkit/nuxt": "^1.6.1",
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  }
}

This is on a fresh install / new Nuxt project. No other modules/plugins installed.

Environment

• OS: Windows 10 • Browser: Firefox • Version: 1.6.1

[sashamilenkovic]

This is a theming issue. I'd suggest taking a look at the theming section of the installation guide: https://formkit.com/getting-started/installation

[MalachiDraven]

This is a theming issue. I'd suggest taking a look at the theming section of the installation guide: https://formkit.com/getting-started/installation

You were right. Installing the Genesis them fixed it. The documentation for the new Tailwind themes is very confusing though. How exactly do I add a basic/starter theme to my existing project? I tried following the documentation here - https://formkit.com/essentials/styling#tailwind-css - but it didn't work.