rocketclimb / rocketicons

React and React Native icons powered by Tailwind
https://rocketicons.io
MIT License
68 stars 0 forks source link

Classes are prefixed twice - tailwind config prefix #145

Open kkoudelka opened 4 months ago

kkoudelka commented 4 months ago

The icons work fine without a prefix, however once I want to use custom prefix, Rocketicons stop working.

// tailwind.config.js
const icons = require("rocketicons/tailwind");

/** @type {import('tailwindcss').Config} */
export default {
  // content: ["./**/*.{js,jsx,ts,tsx}", "./*.{js,jsx,ts,tsx}"],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: ["class", '[data-mode="dark"]'],
  prefix: "a-",
  theme: {
    extend: {},
  },
  plugins: [icons.iconPlugin], // plugins: [icons] doesn't work in Storybook; idk why
};

Background and text colours work: image

Rocketicons intellisense: image

Using a-a-icon-current starts throwing errors like this and the project won't compile:

(2:1) E:\Projects\storybooktest\src\tailwind.css The `p-0` class does not exist. If `p-0` is a custom class, make sure it is defined within a `@layer` directive.

  1 | @tailwind base;
> 2 | @tailwind components;
    | ^
  3 | @tailwind utilities;
  4 | @tailwind variants;

The project compiles just fine using a-icon-current, however no Rocketicons classes are bundled in tailwind.css.

programad commented 2 months ago

We just published version 0.2.8 which fixes this.

kkoudelka commented 2 months ago

I just tested this, however it was not working for me.

I updated the package to 0.2.8, added prefix: 'ads-' in tailwind.config.ts.

Intellisense now shows correct classes: image

For instance, classes for my Spinner component were not working. ads-icon-current seems to be generating wrong class.

This is shown on hover: .ads-icon-current.ads-icon-ri.ads-icon-filled and .ads-icon-current.ads-icon-ri.ads-icon-outlined image

Build output is also correct:

/* tailwind.css */
.ads-icon-current.ads-icon-ri.ads-icon-outlined {
stroke: currentColor;
}

.ads-icon-current.ads-icon-ri.ads-icon-filled {
fill: currentColor;
}

And this is what is generated in HTML:

<svg viewBox="0 0 24 24" fill="none" class="icon-ri icon-default icon-filled ads-icon-current ads-size-5 ads-animate-spin">
...
</svg>

icon-ri icon-default icon-filled are not prefixed with ads-.

Any idea if this is a config error on my end? Thank you in advance.