Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`*-off` icons generation

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

2reactions

Disorrdercommented, Jun 15, 2022

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.

0reactions

WinterSilencecommented, Apr 6, 2022

@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:

Top Results From Across the Web

Generation Icons - Free SVG & PNG Generation Images

Find 2448 Generation images and millions more royalty free PNG & vector images from the world's most diverse collection of free icons.

Generation Icons & Symbols - Flaticon

1214 generation icons. Vector icons in SVG, PSD, PNG, EPS and ICON FONT.

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser.

Kick Off Icon Generation Process Schedule Product Initiation

Our Kick Off Icon Generation Process Schedule Product Initiation are topically designed to provide an attractive backdrop to any subject. Use them to...

App Icons - Foundations - Human Interface Guidelines - Design

A unique, memorable icon communicates the purpose and personality of your experience and can help people recognize your app or game at a...