Alan's SVG Button Maker

This tool converts SVGs into HTML/CSS buttons with the following features:

Minimal button HTML. For example:

<button aria-label="Play" class="play-button"></button>
SVGs stored directly in the CSS
Hover state (including fix for Safari on iOS - see references)
Colors defined through CSS custom property variables
Copy/paste snippets for everything you need

Instructions

The process for creating a button is:

Open your SVG file in a text editor (e.g. the free Visual Studio Code) then copy and paste the text into the Input -> SVG Input field

You can also click one of the Input -> Samples to get started
The Input -> Preview shows how the button will look and function. When you click on it, its Clicks counter will update.
Customize your button's colors, classes, and sizes in the Button Customization and Page Customization sections
Copy the Output -> Root CSS Variables and Output -> Button CSS fields to your site's CSS.

You only need on copy of the Output -> Root CSS Variables in your CSS even if you use multiple Output -> Button CSS snippets to create different buttons
Copy the Output -> Example Listener code to your site's JavaScript (and update it to provide whatever functionality you need for the button)
Copy the Output -> Button HTML to wherever you want a button to appear on your site

Consider staring the project on GitHub if you find it useful:

Input

SVG Input

Samples

Preview

Output

Root CSS Variables

Button CSS

Example Listener

Button HTML

Button Customization

CSS Classes

Primary (for selector)

Secondaries (optional)

Aria Label

Value

Primary Color

Base Variable Name

Hover Variable Name

Border Color

Base Variable Name

Hover Variable Name

Background Color

Base Variable Name

Hover Variable Name

Preview

Page Customizations

Page CSS

Preview

TODO

Add note about using visually hidden as another option for accessibility
Add a way to adjust padding between the edges of the SVG and the inside of the button
Save settings so refreshing the page doesn't reset the options
Write up how :after is used to provide the target for the mask-image

Notes

I'm currently using icons from Iconoir. They are free, open-source, and use the MIT License. (Note: some of their SVGs have an issue that prevents them from working properly with mask-image. See Issues below for how to fix that.)
The Button Customization section offers the ability to change the size, colors, and classes for the button. The colors can be any valid CSS color property value including variables (which is how they are set up by default).
The Page Customization section lets you change the variables live on the site so you can see the results. These variables are output in the Output -> Root CSS Variables section so you can copy/paste them into your site.
The CSS uses mask-image and associated properties. It allows buttons to use CSS variables (as compared to background-image which requires changes the source SVG directly to do things like change colors).
The conversion process works best with black and white SVGs. Any solid area in the source is filled in on the resulting output. Color images can be used, but the color itself is disregarded. The only thing that matters is opacity.
Changing the colors in the Button Customization section affects the sample buttons. Change the size does not. This is by design as the samples are using the pages CSS variables for colors while sizing it up to the individual buttons needs.
The Sample buttons prepend their button names with sample- to avoid using the styles produced by the tool directly. If you prepend the CSS Selector in the Button Customization section the same way it'll effect the corresponding sample including size adjustments.
There are some possible optimizations that could be done with with the conversion process. I'm not interested in adding the complexity it would require to implement them.

Issues

Some icons from Iconoir have SVG elements with multiple stroke-width attributes. These don't render in my mac browsers. Manually removing the extra stroke-width fixes them.

References