search

tailwindlabs / tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
https://tailwindcss-custom-forms.netlify.app/
MIT License
1.55k stars 72 forks source link

Not rendering SVGs on elements #17

Closed petar-p closed 5 years ago

petar-p commented 5 years ago

Hi,

Found an issue where SVGs on .form-checkbox, .form-radio and .form-select are not rendering as background-image, because of missing '/' on self-closing tags.

The customForms configuration for checkboxIcon, radioIcon and selectIcon looks like this:

checkboxIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"></svg>,

radioIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"></svg>,

selectIcon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"></svg>,

With that configuration SVGs are not rendering as background-image on .form-checkbox,.form-radio and .form-select

I've debugged and found out that if I put '/' on self-closing tags <path /> and <circle /> everything renders properly.

checkboxIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z" /></svg>,

radioIcon: <svg viewBox="0 0 16 16" fill="#fff" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3" /></svg>,

selectIcon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${defaultTheme.colors.gray[500]}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z" /></svg>,

Issue found using:

tailwindcss: 1.0.3 tailwindcss/custom-forms: 0.1.4

OS: Windows 10 Browser: Chrome Version 74.0.3729.169

I'm not sure, why exactly there's the issue with self-closing tags, since browsers allow the '/' to be ommited.

Huge Thanks for all your great work and effort!

adamwathan commented 5 years ago

Interesting! I can't seem to reproduce this, here's a screenshot of Chrome 74 on Windows 10:

image

But there's no harm in adding the slash so I'm fine with adding it. Wish I could reproduce though 🤔

adamwathan commented 5 years ago

Actually it looks like all of the tags already have self-closing slashes, it's just the documentation that's missing them, so I'm guessing maybe you copied over the the default configuration to tweak it and inherited that bug from the docs, whoops. Fixing for the next release 👍

petar-p commented 5 years ago

Yes, I copied the customForms configuration from the documentation published on https://tailwindcss-custom-forms.netlify.com/

Thanks!