SVG iconColor not ouputting correctly

[gavinmcfarland]

Using the custom SVG icon example on the homepage the iconColor doesn't output correctly.

// tailwind.config.js
module.exports = {
  theme: {
    customForms: theme => ({
      default: {
        checkbox: {
          icon: iconColor => '<svg fill="${iconColor}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>',
          iconColor: theme('colors.gray.800'),
          '&:hover': {
            iconColor: theme('colors.gray.700'),
          },
        },
      },
    })
  },
  plugins: [
    require('@tailwindcss/custom-forms'),
  ]
}

I installed a fresh install of tailwind with the custom-forms plugin installed and it outputs the following:

.form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg fill='%24%7biconColor%7d' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3e%3cpath d='M0 11l2-2 5 5L18 3l2 2L7 18z'%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

In particular notice the fill is showing fill='%24%7biconColor%7d'

Many thanks, Gavin

[adamwathan]

Whoops, that's a mistake in the docs, pushing a fix now.

The solution is you need to use a template string, not a regular single quoted string:

- icon: iconColor => '<svg fill="${iconColor}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>'
+ icon: iconColor => `<svg fill="${iconColor}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>`

[gavinmcfarland]

No worries. I did a quick test, I think it's pulling in the colour now but should it be a hex value? It's outputting the following.

fill='%232d3748'

[gavinmcfarland]

Sorry that was my bad, I can see that for it to be a data URI it needs to be converted as you have it. It works now. Thank you.