SVG theme support - Figma plugin exploration

TLDR PatterFly designers and developers are in need of SVG theming support. Currently, many in the field are unaware of best practices for SVG theme integration and configuration.

Update: 11/25/24

• 1: Inline SVG support: To support SVG theming, inline svgs must be deliverable via PF-React.
• 2: Current color: - The plugin SVG Export https://www.figma.com/community/plugin/814345141907543603/svg-export supports removal of hard coded colors and applies currentColor where needed. This
• 3: Advanced usage/Figma plugin - For granular color control, we would need to use an extension, whether developed by us or otherwise. This can be done w/CSS, but is not an automated process.

Design management requires plugin approval.

Docs

Goals

• Maintain a single file containing necessary data for presentational theming updates
• Solution should be efficient and easy to use

Possible Programs

Figma
Adobe Illustrator
Free software

Possible plugins

SVG Export https://www.figma.com/community/plugin/814345141907543603/svg-export
SVG Code Copy https://www.figma.com/community/plugin/1254882554691503705/svg-code-copy

VS Code color mapper https://www.figma.com/community/plugin/1218260433851630449/visual-studio-code-color-mapper (VS Code)

Start with the inline SVG dependency in PF-React issue 11288, then review the linked Docs document and the listed Figma plugins. Define a theming approach that meets the single-file and ease-of-use goals, and document the selected program or plugin for design management approval.