svg icons

by jpeter06

HTML

<svg  class="nodisplay" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="sun-grad" x1="0" y1="0" x2="18" y2="18">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
      <stop offset="3%" style="stop-color:#e5b300;stop-opacity:1" />
    </linearGradient>
  </defs>
    <symbol id="square" viewBox="0 0 100 100">
      <rect x="0" y="0" width="100" height="100" style="fill:transparent;stroke-width:0.1;stroke:rgb(0,0,0)" />
    </symbol>
    
    <symbol id="icon-sun" viewBox="0 0 100 100">
    <circle r="25" cy="50" cx="50" fill="currentColor"></circle>
  </symbol>
  
    <symbol id="icon-cloud-sun" viewBox="0 0 100 100">      
    <circle r="25" cy="35" cx="35" fill="currentColor"></circle>
  </symbol>
  
  <symbol id="icon-cloud" viewBox="0 0  100 100">
      <path fill="currentColor" d="M 57.312119,19.760757 A 25.694554,25.694554 0 0 0 33.820582,35.051078 13.061735,13.061735 0 0 0 30.262281,34.554222 13.061735,13.061735 0 0 0 17.200398,47.616113 13.061735,13.061735 0 0 0 17.747991,51.360463 11.631939,11.953495 0 0 0 15.836696,51.197669 11.631939,11.953495 0 0 0 4.2040477,63.149579 11.631939,11.953495 0 0 0 15.462475,75.097255 43.867788,13.640778 0 0 0 49.483011,80.12496 43.867788,13.640778 0 0 0 83.753037,75 14.865659,14.865659 0 0 0 95.814886,60.401045 14.865659,14.865659 0 0 0 83.006699,45.679461 a 25.694554,25.694554 0 0 0 0.0021,-0.226211 25.694554,25.694554 0 0 0 -25.694588,-25.692469 25.694554,25.694554 0 0 1 -0.0021,0 z"></path>
    </symbol>
    
    <symbol id="icon-cloud2"  viewBox="-25 5 100 80">
      <use href="#icon-cloud" width="75" ></use>
    </symbol>
    <symbol id="icon-cloud3"  viewBox="0 -5 100 90">
      <use href="#icon-cloud" width="90" ></use>
    </symbol>
</svg>
<a>
  <svg  class="icon-fill-sun" aria-hidden="true" focusable="false">
    <use href="#square"></use>
    <use href="#icon-sun"></use>
  </svg>
</a>
<a>
  <svg class="icon-fill-light" aria-hidden="true" focusable="false">
    <use...

CSS

html, body{
  padding:0xp;margin:0px;
  width:100%;height:100%;
  overflow:hidden;
}
*,svg {padding:0px,margin:0px}
body{
  display:flex;
  width:100%;
}

body {
  --sun-color: #fa0;
  --cloud-color: #ddd;
  --cloud2-color: #999;
}

body svg{
  flex-grow:0;
  width:100px;
}
.nodisplay{ display:none}

.icon-fill-sun{
  color:var(--sun-color);
}
.icon-fill-light{
  color:var(--cloud-color);
}
.icon-fill-dark{
  color:var(--cloud2-color);
}