Css

Alert Accordion Alert Dialog Aspect Ratio Attachment Avatar Badge Breadcrumb Bubble Button Button Group Calendar Card Carousel Chart Checkbox Collapsible Combobox Command Menu Context Menu Data Table Date Picker Dialog Drawer Dropdown Menu Empty Field Hover Card Input Input Group InputOTP Item KBD Label Marker Menubar Message Message Scroller Native Select Navigation Menu Pagination Popover Progress Radio Group Resizable Scroll Area Select Separator Sheet Sidebar Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toggle Toggle Group Tooltip Typography

我们使用 Tailwind 的情况下，想通过 class 直接给我们的 SVG 图标设置颜色，或者跟随父组件，需要用到这个 fill=“currentColor”，然后就可以在 <template> <svg t="1749727002733" class="icon" viewBox="0 0 1394 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5650" width="200" height="200"> <path d="M808.665066 968.123525a139.174837 139.174837 0 0 1-222.989114 0L28.061551 224.448838A140.525626 140.525626 0 0 1 0 140.133462C0 62.746326 62.484883 0 139.567002 0h1115.228801c30.283817 0 59.739731 9.891261 83.944998 28.192273 61.569833 46.558646 73.901229 134.425289 27.538666 196.256565L808.665066 968.123525z" fill="currentColor" p-id="5651"></path> </svg> </template> 然后在 vue 中使用，可以跟随父组件 <div :class="[ 'flex items-center px-2 py-1 rounded-full text-xs font-medium min-w-[70px] justify-center', category.change > 0 ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800']"> <IconArrowDown :class="['w-3 h-3 mr-1', category.change > 0 ? 'rotate-180' : '']" /> {{ Math.abs(category.change).toFixed(2) }}% </div> 还可以直接指定颜色 ...