`*-off` icons generation

[WinterSilence]

Icons have hidden cross line:

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-a-b" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" />
  <path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5" />
  <line x1="12" y1="6" x2="12" y2="18" />
  <path d="M16 16v-8h3a2 2 0 0 1 0 4h-3m3 0a2 2 0 0 1 0 4h-3" />
  <!-- hidden cross line -->
  <line stroke="none" x1="4" y1="4" x2="20" y2="20" />
</svg>

Class .icon-tabler-off to display cross line:

.icon-tabler-off line:last-child {
  stroke: currentColor;
}

class="icon icon-tabler icon-tabler-off icon-tabler-a-b" equal current class="icon icon-tabler icon-tabler-a-b-off". https://codepen.io/WinterSilence/pen/ZEvvPdO

[codecalm]

the difference between default and "-off" icon is not only black line, but also white spacing over them:

I want to create "off" version of most of icons during this week

[WinterSilence]

@codecalm yes, I saw, initially I add 2 lines, but then I decided to simplify

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-off icon-tabler-a-b" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" />
  <path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5" />
  <line x1="12" y1="6" x2="12" y2="18" />
  <path d="M16 16v-8h3a2 2 0 0 1 0 4h-3m3 0a2 2 0 0 1 0 4h-3" />
  <line x1="4" y1="3" x2="20" y2="19" stroke="none" />
  <line x1="4" y1="4" x2="20" y2="20" stroke="none" />
</svg>

.icon-tabler-off line:nth-last-child(-n+2) {
  stroke: white;
}
.icon-tabler-off line:last-child {
  stroke: currentColor;
}

[WinterSilence]

@codecalm pros: short svg, less icons = loading faster x2 cons: need set background color to change color of <line x1="4" y1="3" x2="20" y2="19" stroke="none" /> it's reason why I'm removed this line

[WinterSilence]

@codecalm

I want to create "off" version of most of icons during this week

if you want we can convert

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-off icon-tabler-a-b" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" />
  <path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5" />
  <line x1="12" y1="6" x2="12" y2="18" />
  <path d="M16 16v-8h3a2 2 0 0 1 0 4h-3m3 0a2 2 0 0 1 0 4h-3" />
  <line x1="4" y1="3" x2="20" y2="19" stroke="white" />
  <line x1="4" y1="4" x2="20" y2="20" stroke="currentColor" />
</svg>

into

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-a-b-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z" />
  <path d="M3 16v-5.5a2.5 2.5 0 0 1 5 0v5.5m0 -4h-5" />
  <path d="M12 12v6" />
  <path d="M12 6v2" />
  <path d="M16 8h3a2 2 0 1 1 0 4h-3m3 0a2 2 0 0 1 .83 3.82m-3.83 -3.82v-4" />
  <path d="M3 3l18 18" />
</svg>

I played in sandbox today - automate this process not so hard. But it's x2 icons i.e. package size x2

also I found how fix problem with second line:

[Disorrder]

You can create custom CSS class or React component adding a line over icon. Using :after pseudoelement maybe? *-off icons are beautiful styled and generation in this way looks ugly.

[pebly]

I don't see the need of so many *-off icons neither.

I understand that some *-off icons are useful, such as "ce-off":

But I don't see any case when I would want to use, for example, "globe-off":

[codecalm]

@pebly enable/disable some options