-
-
Notifications
You must be signed in to change notification settings - Fork 85
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
Custom svg ignores fill value #338
Comments
have you by chance forgot to name the files as |
No, i did not forget it. Everything was named like that. Widget.Icon({
icon: "search-symbolic",
size: 32
}) I am sure, it tried to render this svg, not something else. I tried it with this as well: https://glyphs.fyi/dir?i=battery50&v=poly&w , and the fills were just whites. |
@TaNorbs I had problems with SVG as well, I downloaded mine from https://icones.js.org/ as SVG, this SVG files has the fill value as "currentColor" so I researched and as you said we should use the
// main.ts file
import Gtk from "types/@girs/gtk-3.0/gtk-3.0";
// using App.addIcons worked for me
App.addIcons(`${App.configDir}/images/icons/`)
// But you can also try
Gtk.IconTheme.get_default().append_search_path(`${App.configDir}/images/icons/`)
// App.config ...
const SoundIndicator = Widget.EventBox({
child: Widget.Icon({
css: 'font-size: 20px;',
icon: `ic-volume-down-symbolic`,
})
}) example svg file for you to test: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02M5 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L9 9H6c-.55 0-1 .45-1 1"/></svg> @Aylur this should be more explicit on the Wiki, maybe as a side note on the Icon Widget or as example code |
With this icon, from @darkyelox, the fill works if its name ends with Then i tried with another one, which contained fill values, removed Sidenote: the console emits warning for missing icon names for the ones which are manually imported, but they are being rendered. |
Hi, i tried to import a custom svg (this for example https://lucide.dev/icons/search, or https://lucide.dev/icons/book), and it gets filled with whatever the
color
css property is, but the stroke color stays black. If i make the color transparent, then stroke becomes transparent as well.Also tried setting
fill: none
on the component in the css property without any success.The same happens, when i tried an icon from Heroicons or glyphs.fyi. Even the colored ones.
It seems as if it ignores the fill value. I dont know whether this behaviour is intended or not, but i would hope that its just a bug.
I am just importing it like in the example under common issues, so
App.addIcons(...)
. Using sass & ags v1.8.0.The text was updated successfully, but these errors were encountered: