D8912: Added a set of Game Folder icons
Noah Davis
noreply at phabricator.kde.org
Sat Nov 10 16:45:03 GMT 2018
ndavis added a comment.
In D8912#357374 <https://phabricator.kde.org/D8912#357374>, @andreyorst wrote:
> I've thought that that's why we have separate breeze and breeze-dark icons. I don't know how to make it dynamic in Inkscape. Is there's any guide for this?
It's a PITA, but to do that right now, you actually need to open up the SVG in a text editor and add the code. It's not that hard, but it can be tedious if you don't automate it or at least use Search and Replace in Kate. It's also not easy to read the code unless you use an SVG optimizer with an option to make the code pretty. Usually, I run my icons through `svgo --pretty -i some-icon.svg` or SVG Cleaner (package is usually called `svgcleaner`) with these settings:
F6410771: Screenshot_20181110_105723.png <https://phabricator.kde.org/F6410771>
F6410767: Screenshot_20181110_105237.png <https://phabricator.kde.org/F6410767>
Running your SVGs through an SVG optimizer is usually a good thing to do anyway since it can reduce the size of your SVGs by 80-90%. Inkscape adds a lot of extra data that is useful for editing SVGs, but not for displaying them. Sometimes SVG optimizers can also help you get past Inkscape bugs.
As an example of how to do this, I'll use the gray 16px folder-games icon. After running it through SVG Cleaner with those settings, I get this:
<svg height="16" viewBox="0 0 4.2333332 4.2333332" width="16" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 -292.76667)">
<path d="m1.1805708 293.95728c-.370925 0-.48656874.31093-.48656874.69452l-.0258849.87107c-.004302.0179-.00662.0365-.006668.055 0 .12786.10022258.23152.22386419.23152.0665226-.00006.12955622-.0309.17204192-.0838l.000195.00082.3223646-.38322c.021422.002.043196.003.065159.003.045396-.00003.090088-.007.1341281-.0159.037136.0803.1155004.13147.2015729.13163.1236387-.00001.2238648-.10366.223864-.23152h.22405513c-.0000008.12786.1002253.23151.223864.23152.086073-.00016.1644372-.0513.2015731-.13163.044039.009.088732.0158.1341279.0159.022028 0 .043866-.00099.06535-.003l.3221738.38322.0001951-.00082c.042481.053.1055194.0837.172042.0838.1236417 0 .2238642-.10366.2238642-.23152-.0000537-.0185-.00238-.0369-.00667-.055l-.025883-.87107c0-.38359-.1156431-.69452-.4865687-.69452h-.8240645-.2240549z" fill="none" stroke="#4d4d4d" stroke-linecap="round" stroke-linejoin="round" stroke-width=".264565"/>
<path d="m10.5 5.9003906a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996094.60000006.60000006 0 0 0 .599609-.5996094.60000006.60000006 0 0 0 -.599609-.5996094zm-5.5.0996094v1h-1v1h1v1h1v-1h1v-1h-1v-1zm4.5.9003906a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996094.60000006.60000006 0 0 0 .599609-.5996094.60000006.60000006 0 0 0 -.599609-.5996094zm2 0a.59999983.59999983 0 0 0 -.599609.5996094.59999983.59999983 0 0 0 .599609.5996094.59999983.59999983 0 0 0 .599609-.5996094.59999983.59999983 0 0 0 -.599609-.5996094zm-1 1a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996094.60000006.60000006 0 0 0 .599609-.5996094.60000006.60000006 0 0 0 -.599609-.5996094zm-3.5.7011719a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996093.60000006.60000006 0 0 0 .5996094-.5996093.60000006.60000006 0 0 0 -.5996094-.5996094zm2 0a.59999983.59999983 0 0 0 -.5996094.5996094.59999983.59999983 0 0 0 .5996094.5996093.59999983.59999983 0 0 0 .5996094-.5996093.59999983.59999983 0 0 0 -.5996094-.5996094z" fill="#4d4d4d" transform="matrix(.26458333 0 0 .26458333 0 292.76667)"/>
</g>
</svg>
First, add the style sheet just under line 1:
<style type="text/css" id="current-color-scheme">
.ColorScheme-Text {
color:#4d4d4d;
}
</style>
Second, add the ColorScheme class. In this case, I'll add it to the existing group (`<g></g>` makes a group) so that it affects everything in the group:
<g transform="translate(0 -292.76667)" class="ColorScheme-Text">
Third, change all of the colors to "currentColor":
Use `stroke="currentColor"` for strokes and `fill="currentColor"` for shapes.
In the end, I get this:
<svg height="16" viewBox="0 0 4.2333332 4.2333332" width="16" xmlns="http://www.w3.org/2000/svg">
<style type="text/css" id="current-color-scheme">
.ColorScheme-Text {
color:#4d4d4d;
}
</style>
<g transform="translate(0 -292.76667)" class="ColorScheme-Text">
<path d="m1.1805708 293.95728c-.370925 0-.48656874.31093-.48656874.69452l-.0258849.87107c-.004302.0179-.00662.0365-.006668.055 0 .12786.10022258.23152.22386419.23152.0665226-.00006.12955622-.0309.17204192-.0838l.000195.00082.3223646-.38322c.021422.002.043196.003.065159.003.045396-.00003.090088-.007.1341281-.0159.037136.0803.1155004.13147.2015729.13163.1236387-.00001.2238648-.10366.223864-.23152h.22405513c-.0000008.12786.1002253.23151.223864.23152.086073-.00016.1644372-.0513.2015731-.13163.044039.009.088732.0158.1341279.0159.022028 0 .043866-.00099.06535-.003l.3221738.38322.0001951-.00082c.042481.053.1055194.0837.172042.0838.1236417 0 .2238642-.10366.2238642-.23152-.0000537-.0185-.00238-.0369-.00667-.055l-.025883-.87107c0-.38359-.1156431-.69452-.4865687-.69452h-.8240645-.2240549z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".264565"/>
<path d="m10.5 5.9003906a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996094.60000006.60000006 0 0 0 .599609-.5996094.60000006.60000006 0 0 0 -.599609-.5996094zm-5.5.0996094v1h-1v1h1v1h1v-1h1v-1h-1v-1zm4.5.9003906a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996094.60000006.60000006 0 0 0 .599609-.5996094.60000006.60000006 0 0 0 -.599609-.5996094zm2 0a.59999983.59999983 0 0 0 -.599609.5996094.59999983.59999983 0 0 0 .599609.5996094.59999983.59999983 0 0 0 .599609-.5996094.59999983.59999983 0 0 0 -.599609-.5996094zm-1 1a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996094.60000006.60000006 0 0 0 .599609-.5996094.60000006.60000006 0 0 0 -.599609-.5996094zm-3.5.7011719a.60000006.60000006 0 0 0 -.5996094.5996094.60000006.60000006 0 0 0 .5996094.5996093.60000006.60000006 0 0 0 .5996094-.5996093.60000006.60000006 0 0 0 -.5996094-.5996094zm2 0a.59999983.59999983 0 0 0 -.5996094.5996094.59999983.59999983 0 0 0 .5996094.5996093.59999983.59999983 0 0 0 .5996094-.5996093.59999983.59999983 0 0 0 -.5996094-.5996094z" fill="currentColor" transform="matrix(.26458333 0 0 .26458333 0 292.76667)"/>
</g>
</svg>
For the breeze-dark icons, just change `#4d4d4d` in the stylesheet to `#f2f2f2`.
You don't need to do any of the stylesheet stuff for color icons, including the 32 and 64 px folder-games icons, but you should still run them through an SVG optimizer to save space. Also, Inkscape adds all the extra junk back every time you save a change in inkscape, so you'll have to make sure you use the SVG optimizer again if you make a change in inkscape.
REPOSITORY
R266 Breeze Icons
REVISION DETAIL
https://phabricator.kde.org/D8912
To: andreyorst, #vdg, ngraham
Cc: bruns, ngraham, kde-frameworks-devel, ndavis, michaelh
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.kde.org/pipermail/kde-frameworks-devel/attachments/20181110/d9585a60/attachment.html>
More information about the Kde-frameworks-devel
mailing list