Proof of concept / strategy decision: SVG images (such as icons)

[damontgomery]

• How are we handling SVG images?
• Variants
  • Color
  • Fill vs outline

Notes

Inline SVGs can be controlled by CSS while src loaded SVGs cannot.

[madhaze]

Would svg sprite be useful? If so what is best way to do the compiling.
Process for cleaning with SVGO?
Preprocess to add fill=CurrentColor or stroke=CurrentColor

[madhaze]

@mabry1985 has an approach he developed for project that looks really solid that is a good candidate for porting into outline.

[damontgomery]

I thought the demo looked good as well. I liked that the SVGs were inline (so they could use CSS) and the tools such as generating the list of icons / optimization looked good.

[damontgomery]

We have been using a similar system to what Josh has. It's worked well. We can control the inline SVG size / color.

We are using the Google Material default (filled) icons. Google also has an outlined option we could place in a separate folder if needed.

So, either in a component or icon file:

import { svg } from 'lit';

const myIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
  <path fill="none" d="M0 0h24v24H0z"/>
  <path d="M17.59 18L19 16.59 14.42 12 19 7.41 17.59 6l-6 6z"/>
  <path d="M11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"/>
</svg>
`

And then include it in a render / html method like any other function. ${myIcon} I think.

We have an x-icon component that takes a name and returns the svg as shown above with these styles:

:host {
  /* For consistency across browsers, particularly Safari. */
  /* width, block, and leading-none are also important. */
  @apply fill-current block leading-none;

  width: 1.33rem;
}

svg {
  /* h-full and w-full allow the consumer of the component to change the height or width to change the icon size. */
  @apply fill-current h-full w-full;
}

And then examples of overriding the icon. You can set margins / widths too if you want.

x-icon {
  @apply text-neutral-black h-4;
}

Safari is particularly weird about what is considered the parent, so check things there.