CachyOS / char-white

1 stars 0 forks source link

How to add Icons? #1

Closed Sewdohe closed 8 months ago

Sewdohe commented 1 year ago

I've just started using CachyOS earlier this week, and noticed a couple of applications are missing icons in this icon pack.

I exported a plain .svg icon from Inkscape and placed it in the scalable folder of this icon pack, and my system displays the icon for the application, however the icon isn't colorized to match the rest of them in my task manager. It just stays the default off-white-blueish color.

How do I make the icon colorize itself like the others do?

ddh4r4m commented 8 months ago

@Sewdohe maybe it's late for the response, but dropping in just for others, in case they stumble upon this , basically the icons inherit the color from color scheme, check the code for the svgs that are working, and it should suffice in helping you out. ANyways I'm putting the explanation here :

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" version="1.1">
 <defs>
   <style id="current-color-scheme" type="text/css">
   .ColorScheme-Text { color: #bbccdd; } .ColorScheme-Highlight { color:#5294e2; }
  </style>
  <linearGradient id="arrongin" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#dd9b44; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#ad6c16; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="aurora" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#09D4DF; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#9269F4; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="cyberneon" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0" style="stop-color:#0abdc6; stop-opacity:1"/>
    <stop offset="1" style="stop-color:#ea00d9; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="fitdance" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#1AD6AB; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#329DB6; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="oomox" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#efefe7; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#8f8f8b; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="rainblue" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#00F260; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#0575E6; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="sunrise" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #FF8501; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #FFCB01; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="telinkrin" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #b2ced6; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #6da5b7; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="60spsycho" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #df5940; stop-opacity:1"/>
   <stop offset="25%" style="stop-color: #d8d15f; stop-opacity:1"/>
   <stop offset="50%" style="stop-color: #e9882a; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #279362; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="90ssummer" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #f618c7; stop-opacity:1"/>
   <stop offset="20%" style="stop-color: #94ffab; stop-opacity:1"/>
   <stop offset="50%" style="stop-color: #fbfd54; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #0f83ae; stop-opacity:1"/>
  </linearGradient>
 </defs>
 <path fill="currentColor" class="ColorScheme-Text" fill-rule="evenodd" d="M 1.619 1.455 C 4.447 4.676 4.821 8 4.672 10.182 C 4.541 12.095 3.364 12.81 3.139 12.901 C 2.671 13.089 1.569 13.37 0 12.364 C 0 13.538 1.009 14.545 2.766 14.545 C 4.522 14.545 5.96 13.135 6.251 11.547 C 7.265 3.347 5.337 2.195 5.337 2.195 C 5.337 2.195 3.571 1.455 1.619 1.455 Z M 7.273 1.455 C 7.786 3.63 11.636 4.487 11.636 5.521 C 11.636 6.556 8.685 6.734 8.727 8.411 C 8.77 10.729 12.492 13.796 16 14.545 C 14.46 12.762 10.567 8.874 11.851 7.875 C 16.471 4.736 12.235 2.168 7.273 1.455 Z"/>
</svg>
 <defs>
   <style id="current-color-scheme" type="text/css">
   .ColorScheme-Text { color: #bbccdd; } .ColorScheme-Highlight { color:#5294e2; }
  </style>

is all you need to make sure is inside your svg code.

Sewdohe commented 8 months ago

thanks for the response! better late than never. I forgot about cachy OS if I'm being honest lol I've been running Fedora for a while now. But I'd still love to incorporate these icons with my current desktop theme.

thanks again!