| 1 |
const baseProps = { |
| 2 |
xmlns: 'http://www.w3.org/2000/svg', |
| 3 |
fill: 'none', |
| 4 |
stroke: 'currentColor', |
| 5 |
strokeWidth: 2, |
| 6 |
strokeLinecap: 'round', |
| 7 |
strokeLinejoin: 'round', |
| 8 |
}; |
| 9 |
|
| 10 |
export const UskLogo = ({ className = 'block h-10 w-10 sm:h-12 sm:w-12' }) => ( |
| 11 |
<svg |
| 12 |
className={className} |
| 13 |
version="1.1" |
| 14 |
id="Layer_1" |
| 15 |
xmlns="http://www.w3.org/2000/svg" |
| 16 |
xmlnsXlink="http://www.w3.org/1999/xlink" |
| 17 |
x="0px" |
| 18 |
y="0px" |
| 19 |
viewBox="0 0 500 500" |
| 20 |
style={{ enableBackground: 'new 0 0 500 500' }} |
| 21 |
xmlSpace="preserve" |
| 22 |
> |
| 23 |
<style |
| 24 |
type="text/css" |
| 25 |
dangerouslySetInnerHTML={{ |
| 26 |
__html: |
| 27 |
'\n\t.st0{fill:#E30C1D;enable-background:new ;}\n\t.st1{fill:#FFFFFF;}\n', |
| 28 |
}} |
| 29 |
/> |
| 30 |
<path |
| 31 |
className="st0" |
| 32 |
d="M473.6,496.4h-447c-12.6,0-22.9-10.2-22.9-22.9v-447c0-12.4,10.2-22.9,22.9-22.9h446.8 |
| 33 |
c12.6,0,22.9,10.2,22.9,22.9v446.8C496.3,486.3,486.2,496.4,473.6,496.4z" |
| 34 |
/> |
| 35 |
<g> |
| 36 |
<path |
| 37 |
className="st1" |
| 38 |
d="M374.3,364l-21.1-157.6c-1.9-14.3-14.2-25-28.6-25c0,0-0.1,0-0.1,0l-143.7,0.7c-14.5,0.1-26.8,11-28.5,25.4 |
| 39 |
l-18.6,156.9c-1,8.2,1.6,16.4,7.1,22.5s13.3,9.7,21.5,9.7h183.5c8.3,0,16.2-3.6,21.7-9.8C372.9,380.6,375.4,372.3,374.3,364z |
| 40 |
M186.4,217.1l132.8-0.6l6.4,47.6c-34.1,4.4-61,23.4-78.4,55.7c-8.5,15.8-12.9,31.5-15,41.9h-63L186.4,217.1z M268.1,361.7 |
| 41 |
c1.9-7.3,5-16.3,9.9-25.3c12-22.3,29.2-34.7,52.2-37.6l8.4,62.9H268.1z" |
| 42 |
/> |
| 43 |
<path |
| 44 |
className="st1" |
| 45 |
d="M212.4,169.2c8.8,0,16-7.2,16-16c0-13.9,11.3-25.3,25.3-25.3c13.9,0,25.3,11.3,25.3,25.3c0,8.8,7.2,16,16,16 |
| 46 |
s16-7.2,16-16c0-31.6-25.7-57.3-57.3-57.3c-31.6,0-57.3,25.7-57.3,57.3C196.4,162.1,203.6,169.2,212.4,169.2z" |
| 47 |
/> |
| 48 |
</g> |
| 49 |
</svg> |
| 50 |
); |
| 51 |
|
| 52 |
export const CloseIcon = ({ className = 'h-4 w-4' }) => ( |
| 53 |
<svg {...baseProps} viewBox="0 0 24 24" className={className}> |
| 54 |
<path d="M18 6 6 18" /> |
| 55 |
<path d="m6 6 12 12" /> |
| 56 |
</svg> |
| 57 |
); |
| 58 |
|
| 59 |
export const MenuIcon = ({ className = 'h-4 w-4' }) => ( |
| 60 |
<svg {...baseProps} viewBox="0 0 24 24" className={className}> |
| 61 |
<path d="M4 6h16" /> |
| 62 |
<path d="M4 12h16" /> |
| 63 |
<path d="M4 18h16" /> |
| 64 |
</svg> |
| 65 |
); |
| 66 |
|
| 67 |
export const SupportIcon = ({ className = 'h-4 w-4 block' }) => ( |
| 68 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 69 |
<path d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" /> |
| 70 |
<path d="M21 16v2a4 4 0 0 1-4 4h-5" /> |
| 71 |
</svg> |
| 72 |
); |
| 73 |
|
| 74 |
export const SparklesIcon = ({ className = 'w-5 h-5' }) => ( |
| 75 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 76 |
<path d="M12 2v4" /> |
| 77 |
<path d="m16.2 7.8 2.9-2.9" /> |
| 78 |
<path d="M18 12h4" /> |
| 79 |
<path d="m16.2 16.2 2.9 2.9" /> |
| 80 |
<path d="M12 18v4" /> |
| 81 |
<path d="m4.9 19.1 2.9-2.9" /> |
| 82 |
<path d="M2 12h4" /> |
| 83 |
<path d="m4.9 4.9 2.9 2.9" /> |
| 84 |
</svg> |
| 85 |
); |
| 86 |
|
| 87 |
export const StarIcon = ({ className = 'w-4 h-4 block' }) => ( |
| 88 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 89 |
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /> |
| 90 |
</svg> |
| 91 |
); |
| 92 |
export const FilledStarIcon = ({ className = 'w-4 h-4 block' }) => ( |
| 93 |
<svg className={className} viewBox="0 0 24 24" fill="currentColor"> |
| 94 |
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /> |
| 95 |
</svg> |
| 96 |
); |
| 97 |
|
| 98 |
const navClass = 'h-5 w-5 block color-current'; |
| 99 |
|
| 100 |
export const HomeIcon = ({ className = navClass }) => ( |
| 101 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 102 |
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /> |
| 103 |
<path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> |
| 104 |
</svg> |
| 105 |
); |
| 106 |
export const GridIcon = ({ className = navClass }) => ( |
| 107 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 108 |
<rect width={7} height={9} x={3} y={3} rx={1} /> |
| 109 |
<rect width={7} height={5} x={14} y={3} rx={1} /> |
| 110 |
<rect width={7} height={9} x={14} y={12} rx={1} /> |
| 111 |
<rect width={7} height={5} x={3} y={16} rx={1} /> |
| 112 |
</svg> |
| 113 |
); |
| 114 |
export const CurrencySwitcherIcon = ({ className = navClass }) => ( |
| 115 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 116 |
<circle cx="12" cy="12" r="10" /> |
| 117 |
<path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" /> |
| 118 |
<path d="M12 18V6" /> |
| 119 |
</svg> |
| 120 |
); |
| 121 |
export const VariationSwatchesIcon = ({ className = navClass }) => ( |
| 122 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 123 |
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" /> |
| 124 |
<circle cx="7.5" cy="10.5" r=".5" fill="currentColor" stroke="none" /> |
| 125 |
<circle cx="12" cy="7.5" r=".5" fill="currentColor" stroke="none" /> |
| 126 |
<circle cx="16.5" cy="10.5" r=".5" fill="currentColor" stroke="none" /> |
| 127 |
<circle cx="9" cy="15.5" r=".5" fill="currentColor" stroke="none" /> |
| 128 |
</svg> |
| 129 |
); |
| 130 |
export const BadgeIcon = ({ className = navClass }) => ( |
| 131 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 132 |
<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /> |
| 133 |
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor" /> |
| 134 |
</svg> |
| 135 |
); |
| 136 |
export const WoocommerceIcon = ({ className = navClass }) => ( |
| 137 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 138 |
<path d="M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5" /> |
| 139 |
<path d="M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244" /> |
| 140 |
<path d="M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05" /> |
| 141 |
</svg> |
| 142 |
); |
| 143 |
export const EddIcon = ({ className = navClass }) => ( |
| 144 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 145 |
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /> |
| 146 |
<path d="m7.5 4.21 4.5 2.6 4.5-2.6" /> |
| 147 |
<path d="M12 17.5V12" /> |
| 148 |
</svg> |
| 149 |
); |
| 150 |
export const InfoIcon = ({ className = navClass }) => ( |
| 151 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 152 |
<circle cx={12} cy={12} r={10} /> |
| 153 |
<path d="M12 16v-4" /> |
| 154 |
<path d="M12 8h.01" /> |
| 155 |
</svg> |
| 156 |
); |
| 157 |
|
| 158 |
export const SearchIcon = ({ className = 'h-4 w-4 block' }) => ( |
| 159 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 160 |
<path d="m21 21-4.34-4.34" /> |
| 161 |
<circle cx={11} cy={11} r={8} /> |
| 162 |
</svg> |
| 163 |
); |
| 164 |
|
| 165 |
export const CheckIcon = ({ className = 'h-4 w-4' }) => ( |
| 166 |
<svg {...baseProps} viewBox="0 0 24 24" className={className}> |
| 167 |
<path d="M20 6 9 17l-5-5" /> |
| 168 |
</svg> |
| 169 |
); |
| 170 |
|
| 171 |
export const EyeIcon = ({ className = 'h-4 w-4 block' }) => ( |
| 172 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 173 |
<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /> |
| 174 |
<circle cx={12} cy={12} r={3} /> |
| 175 |
</svg> |
| 176 |
); |
| 177 |
|
| 178 |
export const PlayIcon = ({ className = 'h-4 w-4 block' }) => ( |
| 179 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 180 |
<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" /> |
| 181 |
</svg> |
| 182 |
); |
| 183 |
|
| 184 |
export const LinkPluginIcon = ({ className = 'h-4 w-4 block' }) => ( |
| 185 |
<svg {...baseProps} width={24} height={24} viewBox="0 0 24 24" className={className}> |
| 186 |
<path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z" /> |
| 187 |
<path d="m2 22 3-3" /> |
| 188 |
<path d="M7.5 13.5 10 11" /> |
| 189 |
<path d="M10.5 16.5 13 14" /> |
| 190 |
<path d="m18 3-4 4h6l-4 4" /> |
| 191 |
</svg> |
| 192 |
); |
| 193 |
|
| 194 |
export const LockIcon = ({ className = 'h-7 w-7', stroke = 'currentColor' }) => ( |
| 195 |
<svg |
| 196 |
xmlns="http://www.w3.org/2000/svg" |
| 197 |
width={28} |
| 198 |
height={28} |
| 199 |
viewBox="0 0 24 24" |
| 200 |
fill="none" |
| 201 |
stroke={stroke} |
| 202 |
strokeWidth={2} |
| 203 |
strokeLinecap="round" |
| 204 |
strokeLinejoin="round" |
| 205 |
className={className} |
| 206 |
> |
| 207 |
<rect width={18} height={11} x={3} y={11} rx={2} ry={2} /> |
| 208 |
<path d="M7 11V7a5 5 0 0 1 10 0v4" /> |
| 209 |
</svg> |
| 210 |
); |
| 211 |
|
| 212 |
export const UserIcon = ({ className = 'h-5 w-5' }) => ( |
| 213 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 214 |
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /> |
| 215 |
<circle cx="12" cy="7" r="4" /> |
| 216 |
</svg> |
| 217 |
); |
| 218 |
export const GlobeIcon = ({ className = 'h-5 w-5' }) => ( |
| 219 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 220 |
<circle cx="12" cy="12" r="10" /> |
| 221 |
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /> |
| 222 |
</svg> |
| 223 |
); |
| 224 |
export const BookIcon = ({ className = 'h-5 w-5' }) => ( |
| 225 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 226 |
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /> |
| 227 |
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" /> |
| 228 |
</svg> |
| 229 |
); |
| 230 |
export const MessageIcon = ({ className = 'h-5 w-5' }) => ( |
| 231 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 232 |
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /> |
| 233 |
</svg> |
| 234 |
); |
| 235 |
export const VideoPanelIcon = ({ className = 'h-5 w-5' }) => ( |
| 236 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 237 |
<polygon points="23 7 16 12 23 17 23 7" /> |
| 238 |
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" /> |
| 239 |
</svg> |
| 240 |
); |
| 241 |
export const EditIcon = ({ className = 'h-5 w-5' }) => ( |
| 242 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 243 |
<path d="M12 20h9" /> |
| 244 |
<path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /> |
| 245 |
</svg> |
| 246 |
); |
| 247 |
export const FacebookIcon = ({ className = 'h-5 w-5' }) => ( |
| 248 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 249 |
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /> |
| 250 |
</svg> |
| 251 |
); |
| 252 |
export const LiveVisitorCountIcon = ({ className = 'h-5 w-5' }) => ( |
| 253 |
<svg {...baseProps} className={className} viewBox="0 0 24 24"> |
| 254 |
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /> |
| 255 |
<circle cx="9" cy="7" r="4" /> |
| 256 |
<path d="M23 21v-2a4 4 0 0 0-3-3.87" /> |
| 257 |
<path d="M16 3.13a4 4 0 0 1 0 7.75" /> |
| 258 |
</svg> |
| 259 |
); |
| 260 |
|
| 261 |
const UpsellCrossSellIcon = () => ( |
| 262 |
<svg |
| 263 |
xmlns="http://www.w3.org/2000/svg" |
| 264 |
width={24} |
| 265 |
height={24} |
| 266 |
viewBox="0 0 24 24" |
| 267 |
fill="none" |
| 268 |
stroke="currentColor" |
| 269 |
strokeWidth={2} |
| 270 |
strokeLinecap="round" |
| 271 |
strokeLinejoin="round" |
| 272 |
className="h-5 w-5 block color-current" |
| 273 |
> |
| 274 |
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" /> |
| 275 |
<line x1="3" y1="6" x2="21" y2="6" /> |
| 276 |
<path d="M16 10a4 4 0 0 1-8 0" /> |
| 277 |
</svg> |
| 278 |
); |
| 279 |
export const adminIconMap = { |
| 280 |
home: HomeIcon, |
| 281 |
grid: GridIcon, |
| 282 |
'currency-switcher': CurrencySwitcherIcon, |
| 283 |
'variation-swatches': VariationSwatchesIcon, |
| 284 |
settings: GridIcon, |
| 285 |
badge: BadgeIcon, |
| 286 |
star: StarIcon, |
| 287 |
woocommerce: WoocommerceIcon, |
| 288 |
edd: EddIcon, |
| 289 |
other: GridIcon, |
| 290 |
info: InfoIcon, |
| 291 |
'live-visitor-count': LiveVisitorCountIcon, |
| 292 |
'upsell-cross-sell': UpsellCrossSellIcon, |
| 293 |
}; |
| 294 |
|
