Inline SVG icons for profit

[jrolfs]

• Formats
  • Optimized/processed individual SVG files
  • CommonJS for vanilla JS
  • SCSS for legacy
• Automate Sketch layer metadata → SVG token value (class="otkit-[?]")

[lastquestion]

Recording our in-person discussion:

• I'd like to see how we interact w/ design to "know" the parts of icons that are "colorable"
• I'd like to see how we would use this in react - perhaps a toy project / subdirectory or a PR in ot-react-ui or something
• I think we wouldn't want to send these XML strings as CSS modules but rather as commonJS if I understand the react implementation strategy you have in mind?
• if that's true, perhaps we still output CSS as CSS classes or CSS module values data-uri-encoded so it's easy to use for "other hosters" - but I think react is the only thing we truly need to support so maybe we can cut this?

[jrolfs]

I'd like to see how we interact w/ design to "know" the parts of icons that are "colorable"

I believe we get SVG metadata via the <desc>/<metadata>/<title> tags from Sketch layers. The plan is to automate that to a class="otkit-color otkit-accent" attribute or the like.

I'd like to see how we would use this in react - perhaps a toy project / subdirectory or a PR in ot-react-ui or something

I'm going to open a PR up against ot-react-ui-components that will include examples/usage

I think we wouldn't want to send these XML strings as CSS modules but rather as commonJS if I understand the react implementation strategy you have in mind?

• The format for React will be straight up SVG files to be consumed with a loader/plugin
• Unless it's a ton of extra work I'm going to include basic support for vanilla JS via CommonJS modules (or maybe as an option to forego a build change/webpack etc.)

if that's true, perhaps we still output CSS as CSS classes or CSS module values data-uri-encoded so it's easy to use for "other hosters" - but I think react is the only thing we truly need to support so maybe we can cut this?

• I'm planning on providing limited icon support (read: single color/current implementation) by continuing to output data URI selectors in SCSS