Error: Icon collection not found

rafaelluz-f commented 10 months ago

First of all thanks for your time in building this awesome library. I'm opening this issue because I'm still having the same issue above in version 1.1. With the error, I can't format the code using prettier.

λ node -v
v20.5.1
λ npm -v
8.3.2

Environment: Windows

Error: Icon collection "heroicons" not found. Please install @iconify-json/heroicons or @iconify/json
    at c:\Users\rafaa\Developer\something\node_modules\@egoist\tailwindcss-icons\dist\index.js:101:17
    at Array.reduce (<anonymous>)
    at getIconCollections (c:\Users\rafaa\Developer\something\node_modules\@egoist\tailwindcss-icons\dist\index.js:98:22)
    at c:\Users\rafaa\Developer\something\tailwind.config.cjs:32:32
    at evalModule (c:\Users\rafaa\Developer\something\node_modules\jiti\dist\jiti.js:1:255202)
    at jiti (c:\Users\rafaa\Developer\something\node_modules\jiti\dist\jiti.js:1:253130)
    at c:\Users\rafaa\Developer\something\node_modules\tailwindcss\lib\lib\load-config.js:37:30
    at loadConfig (c:\Users\rafaa\Developer\something\node_modules\tailwindcss\lib\lib\load-config.js:39:6)
    at CG (file:///c:/Users/rafaa/Developer/something/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2384:40916)
    at cI (file:///c:/Users/rafaa/Developer/something/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2384:40215)

Package.Json:

{
    "name": "next-start",
    "version": "13.5.2",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "lint:fix": "next lint --fix",
        "format": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
        "deps": "pnpm dlx npm-check-updates -x typescript --deep --interactive",
        "docker:build": "docker build . --no-cache -t $npm_package_name:$npm_package_version -t $npm_package_name:latest",
        "docker:run": "docker run --rm -it -p 3000:3000 --name $npm_package_name $npm_package_name:latest",
        "docker:shell": "docker exec -it $npm_package_name /bin/sh",
        "docker:logs": "docker logs -f $npm_package_name",
        "docker:stop": "docker stop $npm_package_name"
    },
    "dependencies": {
        "@twistail/react-toast": "^0.1.2",
        "next": "13.4.13",
        "react-dom": "18.2.0",
        "react": "18.2.0"
    },
    "devDependencies": {
        "@egoist/tailwindcss-icons": "^1.1.0",
        "@iconify-json/heroicons": "^1.1.12",
        "@iconify-json/ph": "^1.1.6",
        "@tailwindcss/aspect-ratio": "^0.4.2",
        "@tailwindcss/forms": "^0.5.4",
        "@tailwindcss/typography": "^0.5.9",
        "@types/node": "20.4.10",
        "@types/react-dom": "18.2.7",
        "@types/react": "18.2.20",
        "@typescript-eslint/eslint-plugin": "^6.3.0",
        "autoprefixer": "10.4.14",
        "clsx": "^2.0.0",
        "eslint-config-next": "^13.4.13",
        "eslint-plugin-simple-import-sort": "^10.0.0",
        "eslint": "8.47.0",
        "postcss": "8.4.27",
        "prettier-plugin-tailwindcss": "^0.5.2",
        "prettier": "^3.0.1",
        "tailwind-merge": "^1.14.0",
        "tailwindcss-debug-screens": "^2.2.1",
        "tailwindcss": "3.3.3",
        "typescript": "5.0.4"
    }
}

tailwind.config.cjs:

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')

/** @type {import('tailwindcss').Config} */
const tailwindConfig = {
  content: ['src/**/*!(*.stories|*.spec).{ts,tsx}'],
  // darkMode: ['class'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        mono: ['var(--jetbrains-mono-font)', ...defaultTheme.fontFamily.mono],
      },
      colors: {
        black: '#121314',
        gray: colors.gray,
        primary: colors.blue,
        secondary: colors.indigo,
      },
    },
    debugScreens: {
      position: ['bottom', 'left'],
      ignore: ['dark'],
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('tailwindcss-debug-screens'),
    iconsPlugin({ collections: getIconCollections(['heroicons', 'ph']) }),
  ],
}

module.exports = tailwindConfig

rafaelluz-f commented 10 months ago

Reordering the plugin's array solved it for me. Instead of adding the iconsPlugin() as the last item, I did add it as the first one, and the problem was solved.

 plugins: [
    iconsPlugin({ collections: getIconCollections(['heroicons', 'ph']) }),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('tailwindcss-debug-screens'),
  ],

github-actions[bot] commented 9 months ago

:tada: This issue has been resolved in version 1.1.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

egoist commented 9 months ago

my previous fix only fixed it on macOS, let me know if it works now

egoist / tailwindcss-icons

Error: Icon collection not found #16