Replies: 1 comment 1 reply
-
So customizations.transform does allow altering the svg, but only for custom loaded icons, and not for icons loaded from Iconify collections. Iconify does the same, but I'm not sure why exactly. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi, I'm looking for a way to add a shadow to icons using the Icons Preset and pure css icons.
I tried searching for it here, in the docs and on the internet, but I couldn't find anything so I created this discussion.
First, these are my attempts
Playground: link
I tried using UnoCSS classes to add the shadow, without success.
So I tried using box-shadow, text-shadow and filter: drop-shadow(), and all of them work with the simple div circle and none with the icon.
To my surprise shadow-inset did work but that is not really useful:
One could also just create a div around the icon and add the shadow to that, but it would be cool to have shadow cast in the transparent area of the icon.
Adding shadow to the SVG
Continuing, I tried applying the drop shadow to the svg. Here is what I tried:
I copied the svg from the icon's
--un-icon: url();
attribute, and added a drop shadow using feDropShadow.Then just encoded the string back and pasted it in the devtools:
Awesome! this way UnoCSS could support icon shadows but of course this is a very hacky way and I just discovered it, while not having the slightest idea whether it's feasible.
Couple of things:
This works on Firefox, but Edge and Chrome insert some strings after it. After playing around i figured that they repeat the text that is after
filter='url(#shadow)'
, so when pasting the raw svg data, its end becomes this:I don't know what's up with this but they still accept it as a valid property and the shadow is displayed.
feDropShadow works almost like CSS filter: drop-shadow():
dx
anddy
control the position, but only numbers can be inputted so 'rem' and 'px' would have to be preprocessedstdDeviation
is blur, CSS box-shadow has blur and spread, but it's fine.flood-
prefixflood-color
had no effect on the shadow when I pasted it to the playground (only when I opened the svg file), instead the shadow matches the mask's color, which is still great and something usefulHowever I presume from this line in core.ts that UnoCSS currently does not modify the svg source:
So this would have to be done conditionally here somehow.
I can't live without shadows, so I'll try to create a pr.
Thanks for any ideas and opinions 🙏
Beta Was this translation helpful? Give feedback.
All reactions