New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@iconify/tailwindcss redundant code #290
Comments
There are 2 types of icons: monotone icons that are rendered as masks, icons with palette that are rendered as background. That makes common class name impossible. |
Looked at the source for how the CSS is generated. Doesn't seem all that impossible to me. import { icons as mdi } from "@iconify-json/mdi";
import { icons as logos } from "@iconify-json/logos";
plugin(function ({ addComponents, addUtilities, theme }) {
// Uses text color
addComponents({
".iconify-mask": {
display: "inline-block",
width: theme("width.4"),
height: theme("height.4"),
backgroundColor: theme("colors.current"),
maskImage: "var(--svg)",
maskRepeat: "no-repeat",
maskSize: "100% 100%"
}
});
// Uses icon colors
addComponents({
".iconify-bg": {
display: "inline-block",
width: theme("width.4"),
height: theme("height.4"),
backgroundImage: "var(--svg)",
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%"
}
});
const iconSets = {
mdi: mdi.icons,
logos: logos.icons
};
for (const [set, icons] of Object.entries(iconSets)) {
for (const [name, icon] of Object.entries(icons)) {
const path = encodeURIComponent(icon.body).replace(/%20/g, " ").replace(/%22/g, "'");
const width = icon.width || 24;
const height = icon.height || 24;
addUtilities({
[`.${set}-${name}`]: {
"--svg": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${width} ${height}'%3E${path}%3C/svg%3E")`
}
});
}
}
}) |
Good point. Developer needs to know which icon is used as background and which icon is used as mask, but that would be up to developer. |
Can probably make a new plugin module to work like that. I'll play with it... |
Could just make the mask one the default and call the other One issue I found with |
Added plugin in It adds new plugin Parameters can be:
Basic usage: addIconSelectors(['mdi']) This will create selectors Advanced usage: addIconSelectors({
prefixes: ['mdi'], // prefixes
maskSelector: '.iconify-color', // customise mask selector
backgroundSelector: '.iconify', // customise background selector
iconSelector: '.{prefix}--{name}', // customise icon selector, must have "{prefix}" and "{name}" in it
varName: 'svg', // variable name to use
scale: 1, // scale icons, which sets width/height in background/mask selectors
extraMaskRules: {}, // extra rules to add to mask selector
extraBackgroundRules: {}, // extra rules to add to background selector
customise: (content, name, prefix) => content, // callback to customise icons. First param is content, second is icon name, third is icon set prefix
}) Furthermore, prefixes list accepts not only strings, but custom icon sets. I'll add more details about that later, demo in dev branch has usage example. |
That looks amazing! I like the idea of being able to customize class and variable names as they could conflict. Though I think your example has the |
Thanks! And yes, example has those selectors backwards 😄 Published version 1.1.0 with changes. Documentation has also been rewritten: https://iconify.design/docs/usage/css/tailwind/iconify/ |
It mostly works! One issue is that the |
Set You can also use |
True, but that method forces the dev to specify w/h manually for all icons, because it removes the default. The whole point of component classes is that you can override the defaults in them with utility classes on a case-by-case basis. Using the config doesn't allow modification on a case-by-case basis. As such, I've created a PR that should work. |
Hm. Can you please explain the difference? I have very limited experience with Tailwind, not using it in any of my own projects. How would customisation work that is not available with current code, how will it override default values? |
It has to do with ordering of selectors that otherwise have the same specificity. Tailwind compiles component classes before utility classes, allowing utility classes to override component classes on a case-by-case basis. |
Thanks! That makes perfect sense. I'll merge and republish it as 1.1.1, though with few changes - will split code that generates reusable selectors and icons, so they could be called separately instead of destructuring result. |
Tested, it works correctly. Published version Thanks a lot! |
When I hover over the class
icon-[mdi--magnify]
, I see the following:Everything but the variable is redundant from icon to icon, and should probably be in a separate class to avoid repeated code in the final bundle. If you had 50 different icons on a page, it would have 50 instances of those CSS properties.
Instead of doing
icon-[mdi--magnify]
, what abouticon mdi-[magnify]
?For now, I'm doing this manually in my tailwind config file
The text was updated successfully, but these errors were encountered: