提示:为了展示点击后的状态变化,设置两种图案,分别为反向操作。 <svgclass="h-6 w-6 fill-current"viewBox="0 0 24 24"><pathv-if="isOpen"fill-rule="evenodd"d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1...
-- moon icon --><svgclass="swap-off fill-current w-10 h-10"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"><pathd="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,...
-- this hidden checkbox controls the state --> <!-- sun icon --> <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64...
-- moon icon --><svgclass="swap-off fill-current w-10 h-10"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"><pathd="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14...
border-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> One
填充颜色fill 使用.fill-current工具类将SVG图片的填充颜色设置为当前文本的颜色,即实现通过控制文本颜色来达到控制SVG图形图片的样式。 描边颜色stroke 设置SVG元素的描边颜色 .stroke-current工具类用于设置元素的描边颜色为当前文本的颜色, 描边厚度stroke width ...
<svgxmlns="http://www.w3.org/2000/svg"class="bg-red-400 text-green-300 h-40 w-20 fill-current" viewBox="0 0 80 80"fill="none"stroke="currentColor"> <pathstroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="M11.049 2.927c.3-.921 1.603-.921 ...
border-white"> <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">Menu<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg> Docs
<svg class="flex-no-shrink fill-current" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100px" height="100px"> <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3...
使用fill-current 类名 除了使用text-颜色类名外,还可以使用fill-current类名来更改 svg 图标的填充颜色。这种方法比上一种方法使用更简单,只需要添加fill-current类名,并且不需要为其指定具体的颜色。 <svg class="w-6 h-6 fill-current" viewBox="0 0 20 20"> <path d="M10 12a2 2 0 100-4 2 2...