How about make tailwind plugin intelligent like @egoist/tailwindcss-icons

[yunsii]

I want to use @iconify/tailwind with intelligent and add custom icon set, so how about of this?

If possible I can make a PR for it.

[cyberalien]

It can accept custom icon sets in iconSets option: https://iconify.design/docs/usage/css/tailwind/options.html

[yunsii]

It can accept custom icon sets in iconSets option: iconify.design/docs/usage/css/tailwind/options.html

I know how to custom icon sets, meanwhile, I also want the feautre "classname intelligent" integrated, like:

[cyberalien]

That VSCode plugin does not parse config files, so it cannot show custom icons. It only shows available open source icons.

[cyberalien]

Actually... wrong response, I thought it was a different plugin. But still it is not possible, just for different reason.

That VSCode plugin shows available selectors that are basic selectors, but icons in Iconify plugin are dynamic selectors. Making them static, like heroicons in your screenshot, is not possible because there are about 150k icons.

It might work with addCleanIconSelectors plugin though because it does generate all rules for selected icons: https://iconify.design/docs/usage/css/tailwind/clean.html, but you need to know which icons you want to use and configure it.

[yunsii]

https://github.com/egoist/tailwindcss-icons/blob/044a7c5bbaf572dabb0afd6001cf396918c8c358/src/index.ts#L23-L35

iconify/plugins/tailwind/src/plugin.ts

Lines 12 to 19 in 4765dc9

	export function addDynamicIconSelectors(options?: DynamicIconifyPluginOptions) {
	const prefix = options?.prefix || 'icon';
	return plugin(({ matchComponents }) => {
	matchComponents({
	[prefix]: (icon: string) => getDynamicCSSRules(icon, options),
	});
	});
	}

The difference of the 2 plugins: @egoist/tailwindcss-icons matchComponents with option values. I thought it make classname intelligent happen by tailwind vscode plugin, and I tried.

Moreover, I found that heroicons has 800+ icons

So how about add option (like intelligent) to make addDynamicIconSelectors work with classname intelligent by tailwind vscode plugin?

Works like:

// addDynamicIconSelectors()
className="icon-[mdi--home]"

// addDynamicIconSelectors({ intelligent: true })
className="icon-mdi--home"

[cyberalien]

Big difference is @egoist/tailwindcss-icons creates selectors for all icons. It has to be done because Tailwind CSS generates all possible selectors first, so plugin must generate CSS for thousands of icons, then it picks ones that are used in current project.

If autocompletion is a must have, you can use @egoist/tailwindcss-icons, it is a very good option and looks like it fits perfectly for your use case.

[yunsii]

I want both of benifits:

• autocompletion
• custom icon set

Since it is so, I'm trying to fork @iconify/tailwind and add what I want 😶‍🌫️

[cyberalien]

You can use that plugin with custom icon sets too. collections parameter is list of icon sets, so you can assign IconifyJSON object to custom prefix.

[yunsii]

You can use that plugin with custom icon sets too. collections parameter is list of icon sets, so you can assign IconifyJSON object to custom prefix.

Great, but I have publiched my package tailwindcss-plugin-iconify 😂 and @iconify/tailwind has overrideOnly feature. I will use my package firstly, and it will deprecated at the right time if possible.