620 lines
38 KiB
Vue
620 lines
38 KiB
Vue
<template>
|
||
<svg
|
||
:class="['icon', `icon-${name}`, className]"
|
||
:height="size"
|
||
:style="{ color }"
|
||
:width="size"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<!-- 消息图标 (圆形气泡) -->
|
||
<g v-if="name === 'message-circle'">
|
||
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
|
||
</g>
|
||
|
||
<!-- 聚合登录平台图标 -->
|
||
<g
|
||
v-else-if="name === 'oauth-qq'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
transform="scale(0.0234375)"
|
||
>
|
||
<path
|
||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m210.5 612.4c-11.5 1.4-44.9-52.7-44.9-52.7 0 31.3-16.2 72.2-51.1 101.8 16.9 5.2 54.9 19.2 45.9 34.4-7.3 12.3-125.6 7.9-159.8 4-34.2 3.8-152.5 8.3-159.8-4-9.1-15.2 28.9-29.2 45.8-34.4-35-29.5-51.1-70.4-51.1-101.8 0 0-33.4 54.1-44.9 52.7-5.4-0.7-12.4-29.6 9.4-99.7 10.3-33 22-60.5 40.2-105.8-3.1-116.9 45.3-215 160.4-215 113.9 0 163.3 96.1 160.4 215 18.1 45.2 29.9 72.8 40.2 105.8 21.7 70.1 14.6 99.1 9.3 99.7z"
|
||
/>
|
||
</g>
|
||
|
||
<g
|
||
v-else-if="name === 'oauth-wechat'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
transform="scale(0.0234375)"
|
||
>
|
||
<path
|
||
d="M512 0c282.768 0 512 229.232 512 512 0 282.768-229.232 512-512 512C229.232 1024 0 794.768 0 512 0 229.232 229.232 0 512 0z m140.272 400.128c-116.912 0-211.696 87.696-211.696 195.824 0 108.128 94.8 195.84 211.68 195.84 22.16 0 44.16-3.264 65.344-9.648l77.36 32.864c8.8 3.632 21.296-3.072 21.296-14.112l0.32-81.504C846.256 685.728 864 642.816 864 596c0.016-108.176-94.72-195.872-211.728-195.872zM413.36 208C273.392 208 160 312.96 160 442.368c0 56 21.296 107.36 56.672 147.664l0.4 97.536c0 13.296 15.04 21.376 25.472 17.008l92.576-39.296c24.688 7.44 54.432 11.52 81.76 11.52 1.184 0-13.6-37.376-13.6-81.2 0-131.2 114.976-235.648 239.152-235.648h-0.016c0.704 0 8.224 0.544 8.88 0.544C610.752 271.664 526.624 208 413.36 208z m167.136 279.936c15.792 0 28.608 13.184 28.608 29.392s-12.832 29.408-28.576 29.408l-0.032-0.032c-15.792 0-28.592-13.168-28.592-29.376 0-16.208 12.8-29.392 28.592-29.392z m145.376 0c15.76 0 28.608 13.184 28.608 29.392s-12.736 29.408-28.576 29.408l-0.032-0.032c-15.696 0-28.592-13.168-28.592-29.376 0-16.208 12.848-29.392 28.592-29.392z m-400.64-174.88c18.848 0 34.208 15.776 34.208 35.168 0 19.376-15.296 35.2-34.176 35.2l-0.016-0.016c-18.928 0-34.24-15.76-34.24-35.2 0-19.408 15.408-35.168 34.24-35.168z m174.048-0.016c18.912 0 34.176 15.792 34.176 35.184 0 19.376-15.312 35.184-34.176 35.184-18.88 0-34.192-15.76-34.192-35.2 0-18.56 14.032-33.776 31.76-35.072l2.432-0.096z"
|
||
/>
|
||
</g>
|
||
|
||
<g
|
||
v-else-if="name === 'oauth-alipay'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
transform="scale(0.0234375)"
|
||
>
|
||
<path
|
||
d="M230.404452 576.536487C218.3168 586.264487 205.360974 600.466922 201.598887 618.520487 196.478887 643.18553 200.530365 674.061357 224.327235 698.281183 253.155061 727.64327 296.964452 735.679443 315.886191 737.059617 367.286539 740.777183 422.070539 715.288487 463.364452 686.215791 479.548104 674.795965 507.262887 651.86727 533.753322 616.494748 474.383583 585.84153 400.277148 551.938226 321.050713 555.255096 280.580452 556.946922 251.5968 565.33927 230.404452 576.536487ZM983.262609 712.080696C1009.463652 650.573913 1024 582.967652 1024 512 1024 229.687652 794.334609 0 512 0 229.665391 0 0 229.687652 0 512 0 794.334609 229.665391 1024 512 1024 682.384696 1024 833.491478 940.27687 926.630957 811.876174 838.633739 768.133565 693.604174 696.141913 604.271304 652.577391 561.641739 701.17287 498.621217 749.879652 427.430957 771.072 382.70887 784.361739 342.394435 789.437217 300.232348 780.822261 258.493217 772.274087 227.750957 752.729043 209.830957 733.139478 200.704 723.144348 190.21913 710.433391 182.628174 695.318261 183.340522 697.232696 183.830261 698.368 183.830261 698.368 183.830261 698.368 179.46713 690.843826 176.128 678.867478 174.413913 673.079652 173.256348 667.046957 172.78887 660.72487 172.432696 656.584348 172.343652 652.221217 172.588522 647.68 172.210087 639.977739 172.521739 631.897043 174.258087 623.616 178.44313 603.38087 187.080348 579.806609 209.430261 557.924174 258.493217 509.885217 324.207304 507.302957 358.244174 507.503304 408.665043 507.792696 496.283826 529.853217 570.056348 555.942957 590.491826 512.422957 603.603478 465.875478 612.062609 434.843826L305.307826 434.843826 305.307826 401.67513 462.825739 401.67513 462.825739 335.337739 272.13913 335.337739 272.13913 302.169043 462.825739 302.169043 462.825739 235.853913C462.825739 226.749217 464.62887 219.269565 479.410087 219.269565L554.028522 219.269565 554.028522 302.169043 761.321739 302.169043 761.321739 335.337739 554.028522 335.337739 554.028522 401.67513 719.849739 401.67513C719.849739 401.67513 703.198609 494.502957 651.130435 585.99513 766.686609 627.266783 929.257739 690.843826 983.262609 712.080696Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 新浪微博、百度品牌路径来源：Simple Icons（CC0） -->
|
||
<g v-else-if="name === 'oauth-sina-weibo'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592m1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.601zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149m7.563-1.224c-.346-.105-.57-.18-.405-.615.375-.977.42-1.804 0-2.404-.781-1.112-2.915-1.053-5.364-.03 0 0-.766.331-.571-.271.376-1.217.315-2.224-.27-2.809-1.338-1.337-4.869.045-7.888 3.08C1.309 10.87 0 13.273 0 15.348c0 3.981 5.099 6.395 10.086 6.395 6.536 0 10.888-3.801 10.888-6.82 0-1.822-1.547-2.854-2.915-3.284zm1.908-5.092a3.1 3.1 0 0 0-2.96-.962.786.786 0 0 0-.616.932.79.79 0 0 0 .932.602 1.51 1.51 0 0 1 1.442.465c.376.421.466.977.316 1.473a.786.786 0 0 0 .51.992.813.813 0 0 0 .992-.512 3.11 3.11 0 0 0-.646-3.035zm2.418-2.195c-1.576-1.757-3.905-2.419-6.054-1.968a.91.91 0 0 0-.706 1.081.91.91 0 0 0 1.082.707 4.5 4.5 0 0 1 4.296 1.383 4.53 4.53 0 0 1 .947 4.416.91.91 0 0 0 .586 1.157c.479.165.991-.104 1.157-.586a6.39 6.39 0 0 0-1.338-6.235z"
|
||
/>
|
||
</g>
|
||
|
||
<g v-else-if="name === 'oauth-baidu'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M9.154 0C7.71 0 6.54 1.658 6.54 3.707c0 2.051 1.171 3.71 2.615 3.71 1.446 0 2.614-1.659 2.614-3.71C11.768 1.658 10.6 0 9.154 0m7.025.594C14.86.58 13.347 2.589 13.2 3.927c-.187 1.745.25 3.487 2.179 3.735 1.933.25 3.175-1.806 3.422-3.364.252-1.555-.995-3.364-2.362-3.674a1.2 1.2 0 0 0-.261-.03zM3.582 5.535a3 3 0 0 0-.156.008c-2.118.19-2.428 3.24-2.428 3.24-.287 1.41.686 4.425 3.297 3.864 2.617-.561 2.262-3.68 2.183-4.362-.125-1.018-1.292-2.773-2.896-2.75m16.534 1.753c-2.308 0-2.617 2.119-2.617 3.616 0 1.43.121 3.425 2.988 3.362s2.553-3.238 2.553-3.988c0-.745-.62-2.99-2.924-2.99m-8.264 2.478c-1.424.014-2.708.925-3.323 1.947-1.118 1.868-2.863 3.05-3.112 3.363-.25.309-3.61 2.116-2.864 5.42.746 3.301 3.365 3.237 3.365 3.237s1.93.19 4.171-.31c2.24-.495 4.17.123 4.17.123s5.233 1.748 6.665-1.616c1.43-3.364-.808-5.109-.808-5.109s-2.99-2.306-4.736-4.798c-1.072-1.665-2.348-2.268-3.528-2.257m-2.234 3.84 1.542.024v8.197H7.758c-1.47-.291-2.055-1.292-2.13-1.462-.072-.173-.488-.976-.268-2.343.635-2.049 2.447-2.196 2.447-2.196h1.81zm3.964 2.39v3.881c.096.413.612.488.612.488h1.614v-4.343h1.689v5.782h-3.915c-1.517-.39-1.59-1.465-1.59-1.465v-4.317zm-5.458 1.147c-.66.197-.978.708-1.05.928-.076.22-.247.78-.1 1.269.294 1.095 1.248 1.144 1.248 1.144h1.37v-3.34z"
|
||
/>
|
||
</g>
|
||
|
||
<g
|
||
v-else-if="name === 'oauth-douyin'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
transform="scale(0.0234375)"
|
||
>
|
||
<path
|
||
d="M512.28125 62.28125C263.9375 62.28125 62.73125 263.65625 62.73125 512.1125 62.73125 760.625 263.9375 962 512.28125 962c248.23125 0 449.49375-201.375 449.49375-449.8875C961.775 263.65625 760.56875 62.28125 512.28125 62.28125z m212.34375 406.51875a198.1125 198.1125 0 0 1-115.3125-36.39375c0 51.8625 0 103.6125 0.45 155.475 0 6.91875 0.3375 13.8375-0.225 20.7a167.23125 167.23125 0 0 1-65.8125 120.7125c-23.0625 16.875-50.85 26.38125-79.59375 27.1125a174.825 174.825 0 0 1-43.03125-3.4875 150.525 150.525 0 0 1-56.8125-25.14375 154.51875 154.51875 0 0 1-64.96875-130.5 154.9125 154.9125 0 0 1 73.51875-127.06875 152.83125 152.83125 0 0 1 101.5875-21.375c0.05625 6.58125-0.16875 13.1625 0.1125 19.6875 0.50625 8.2125 0.05625 16.425 0.225 24.6375v41.90625A59.175 59.175 0 0 0 441.6875 534.05c-12.9375 3.0375-25.36875 8.55-35.60625 17.15625a61.26591797 61.26591797 0 0 0-15.13125 18.95625 72.16875 72.16875 0 0 0-7.2 40.21875c1.575 13.3875 7.14375 25.9875 16.03125 36.225 5.9625 7.0875 13.3875 12.7125 21.15 17.4375 21.375 12.09375 49.21875 10.8 69.8625-2.41875 19.96875-12.375 32.90625-35.26875 32.9625-58.8375V389.9375c0.3375-40.66875 0.05625-81.3375 0.225-121.95h83.925c-0.225 7.14375 0.675 14.2875 1.85625 21.31875h0.45c2.25 11.8125 6.6375 23.11875 12.0375 33.8625 8.55 16.5375 21.09375 31.33125 37.125 41.0625 0.95625 0.61875 1.6875 1.51875 2.475 2.30625 11.75625 7.3125 24.75 12.825 38.25 15.75 7.93125 1.74375 16.0875 2.3625 24.1875 2.5875 0 6.1875 0 12.375 0.1125 18.5625 0.3375 21.76875 0.1125 43.5375 0.225 65.3625z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 华为、小米品牌路径来源：Simple Icons（CC0） -->
|
||
<g v-else-if="name === 'oauth-huawei'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M3.67 6.14S1.82 7.91 1.72 9.78v.35c.08 1.51 1.22 2.4 1.22 2.4 1.83 1.79 6.26 4.04 7.3 4.55 0 0 .06.03.1-.01l.02-.04v-.04C7.52 10.8 3.67 6.14 3.67 6.14M9.65 18.6c-.02-.08-.1-.08-.1-.08l-7.38.26c.8 1.43 2.15 2.53 3.56 2.2.96-.25 3.16-1.78 3.88-2.3.06-.05.04-.09.04-.09zm.08-.78C6.49 15.63.21 12.28.21 12.28c-.15.46-.2.9-.21 1.3v.07c0 1.07.4 1.82.4 1.82.8 1.69 2.34 2.2 2.34 2.2.7.3 1.4.31 1.4.31.12.02 4.4 0 5.54 0 .05 0 .08-.05.08-.05v-.06c0-.03-.03-.05-.03-.05M9.06 3.19a3.42 3.42 0 0 0-2.57 3.15v.41c.03.6.16 1.05.16 1.05.66 2.9 3.86 7.65 4.55 8.65.05.05.1.03.1.03a.1.1 0 0 0 .06-.1c1.06-10.6-1.11-13.42-1.11-13.42-.32.02-1.19.23-1.19.23m8.299 2.27s-.49-1.8-2.44-2.28c0 0-.57-.14-1.17-.22 0 0-2.18 2.81-1.12 13.43.01.07.06.08.06.08.07.03.1-.03.1-.03.72-1.03 3.9-5.76 4.55-8.64 0 0 .36-1.4.02-2.34m-2.92 13.07s-.07 0-.09.05c0 0-.01.07.03.1.7.51 2.85 2 3.88 2.3 0 0 .16.05.43.06h.14c.69-.02 1.9-.37 3-2.26l-7.4-.25zm7.83-8.41c.14-2.06-1.94-3.97-1.94-3.98 0 0-3.85 4.66-6.67 10.8 0 0-.03.08.02.13l.04.01h.06c1.06-.53 5.46-2.77 7.28-4.54 0 0 1.15-.93 1.21-2.42m1.52 2.14s-6.28 3.37-9.52 5.55c0 0-.05.04-.03.11 0 0 .03.06.07.06 1.16 0 5.56 0 5.67-.02 0 0 .57-.02 1.27-.29 0 0 1.56-.5 2.37-2.27 0 0 .73-1.45.17-3.14"
|
||
/>
|
||
</g>
|
||
|
||
<g v-else-if="name === 'oauth-xiaomi'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M12 0C8.016 0 4.756.255 2.493 2.516.23 4.776 0 8.033 0 12.012s.23 7.235 2.494 9.497C4.757 23.77 8.017 24 12 24s7.243-.23 9.506-2.491S24 15.99 24 12.012c0-3.984-.233-7.243-2.502-9.504C19.234.252 15.978 0 12 0M4.906 7.405h5.624c1.47 0 3.007.068 3.764.827.746.746.827 2.233.83 3.676v4.54a.15.15 0 0 1-.152.147h-1.947a.15.15 0 0 1-.152-.148V11.83c-.002-.806-.048-1.634-.464-2.051-.358-.36-1.026-.441-1.72-.458H7.158a.15.15 0 0 0-.151.147v6.98a.15.15 0 0 1-.152.148H4.906a.15.15 0 0 1-.15-.148V7.554a.15.15 0 0 1 .15-.149m12.131 0h1.949a.15.15 0 0 1 .15.15v8.892a.15.15 0 0 1-.15.148h-1.949a.15.15 0 0 1-.151-.148V7.554a.15.15 0 0 1 .151-.149M8.92 10.948h2.046c.083 0 .15.066.15.147v5.352a.15.15 0 0 1-.15.148H8.92a.15.15 0 0 1-.152-.148v-5.352a.15.15 0 0 1 .152-.147"
|
||
/>
|
||
</g>
|
||
|
||
<!-- Gitee 品牌路径来源：Simple Icons（CC0） -->
|
||
<g v-else-if="name === 'oauth-gitee'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.59.59 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- Gitea 品牌路径来源：gitea.com/assets/img/logo.svg -->
|
||
<g v-else-if="name === 'oauth-gitea'" stroke="none" stroke-width="0" transform="scale(0.0375)">
|
||
<path
|
||
d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12"
|
||
fill="var(--gitea-cutout)"
|
||
/>
|
||
<path
|
||
d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1"
|
||
fill="currentColor"
|
||
/>
|
||
<path
|
||
d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z"
|
||
fill="currentColor"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 哔哩哔哩、快手品牌路径来源：Simple Icons（CC0） -->
|
||
<g v-else-if="name === 'oauth-bilibili'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"
|
||
/>
|
||
</g>
|
||
|
||
<g v-else-if="name === 'oauth-kuaishou'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M18.315 12.264c2.33 0 4.218 1.88 4.218 4.2V19.8c0 2.32-1.888 4.2-4.218 4.2h-6.202a4.218 4.218 0 0 1-4.023-2.938l-3.676 1.833a2.04 2.04 0 0 1-2.731-.903 2.015 2.015 0 0 1-.216-.907v-5.94a2.03 2.03 0 0 1 2.035-2.024 2.044 2.044 0 0 1 .919.218l3.673 1.85a4.218 4.218 0 0 1 4.02-2.925zm-.062 2.162h-6.078c-1.153 0-2.09.921-2.108 2.065v3.247c0 1.148.925 2.081 2.073 2.1h6.113c1.153 0 2.09-.922 2.109-2.065v-3.247a2.104 2.104 0 0 0-2.074-2.1zM4.18 15.72a.554.554 0 0 0-.555.542v3.734a.556.556 0 0 0 .798.496l.01-.004 3.463-1.756V17.51l-3.467-1.73a.557.557 0 0 0-.249-.06zM9.28 0a5.667 5.667 0 0 1 4.98 2.965 4.921 4.921 0 0 1 3.36-1.317c2.714 0 4.913 2.177 4.913 4.863 0 2.686-2.2 4.863-4.912 4.863a4.921 4.921 0 0 1-3.996-2.034 5.651 5.651 0 0 1-4.345 2.034c-3.131 0-5.67-2.546-5.67-5.687C3.61 2.546 6.149 0 9.28 0Zm8.34 3.926c-1.441 0-2.61 1.157-2.61 2.585s1.169 2.585 2.61 2.585c1.443 0 2.612-1.157 2.612-2.585s-1.169-2.585-2.611-2.585zM9.28 2.287a3.395 3.395 0 0 0-3.39 3.4c0 1.877 1.518 3.4 3.39 3.4a3.395 3.395 0 0 0 3.39-3.4c0-1.878-1.518-3.4-3.39-3.4z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 播放图标 -->
|
||
<g v-else-if="name === 'play'" fill="currentColor" stroke="none" stroke-width="0">
|
||
<path
|
||
d="M6.77 2.35Q5.95 1.9 5.08 2.06Q4.2 2.23 3.61 2.9Q3.02 3.58 3.02 4.51L3.02 19.46Q3.02 20.4 3.61 21.08Q4.2 21.77 5.08 21.94Q5.95 22.1 6.77 21.65L19.73 14.16Q20.54 13.7 20.83 12.85Q21.12 12 20.83 11.15Q20.54 10.3 19.73 9.84L6.77 2.35Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 播放/暂停 -->
|
||
<g v-else-if="name === 'pause'">
|
||
<rect fill="currentColor" height="16" width="4" x="6" y="4" />
|
||
<rect fill="currentColor" height="16" width="4" x="14" y="4" />
|
||
</g>
|
||
|
||
<!-- 播放圈图标 (单曲播放等使用) -->
|
||
<g v-else-if="name === 'play-circle'">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<polygon points="10 8 16 12 10 16 10 8" />
|
||
</g>
|
||
|
||
<!-- 停止图标 -->
|
||
<rect v-else-if="name === 'stop'" fill="currentColor" height="14" width="14" x="5" y="5" />
|
||
|
||
<!-- 音量图标 -->
|
||
<g v-else-if="name === 'volume'">
|
||
<polygon points="11,5 6,9 2,9 2,15 6,15 11,19" />
|
||
<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
|
||
</g>
|
||
|
||
<!-- 静音图标 -->
|
||
<g v-else-if="name === 'volume-mute'">
|
||
<polygon points="11,5 6,9 2,9 2,15 6,15 11,19" />
|
||
<line x1="23" x2="17" y1="9" y2="15" />
|
||
<line x1="17" x2="23" y1="9" y2="15" />
|
||
</g>
|
||
|
||
<!-- 左箭头 -->
|
||
<g v-else-if="name === 'chevron-left'">
|
||
<polyline points="15,18 9,12 15,6" />
|
||
</g>
|
||
|
||
<!-- 右箭头 -->
|
||
<g v-else-if="name === 'chevron-right'">
|
||
<polyline points="9,18 15,12 9,6" />
|
||
</g>
|
||
|
||
<!-- 上箭头 -->
|
||
<g v-else-if="name === 'chevron-up'">
|
||
<polyline points="18,15 12,9 6,15" />
|
||
</g>
|
||
|
||
<!-- 下箭头 -->
|
||
<g v-else-if="name === 'chevron-down'">
|
||
<polyline points="6,9 12,15 18,9" />
|
||
</g>
|
||
|
||
<!-- 箭头图标 -->
|
||
<g v-else-if="name === 'arrow-left' || name === 'back'">
|
||
<line x1="19" x2="5" y1="12" y2="12" />
|
||
<polyline points="12 19 5 12 12 5" />
|
||
</g>
|
||
<g v-else-if="name === 'arrow-right'">
|
||
<line x1="5" x2="19" y1="12" y2="12" />
|
||
<polyline points="12 5 19 12 12 19" />
|
||
</g>
|
||
|
||
<!-- 心形/点赞图标 -->
|
||
<path
|
||
v-else-if="name === 'heart'"
|
||
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
|
||
/>
|
||
|
||
<!-- 音乐图标 -->
|
||
<g v-else-if="name === 'music'">
|
||
<path d="M9 18V5l12-2v13" />
|
||
<circle cx="6" cy="18" r="3" />
|
||
<circle cx="18" cy="16" r="3" />
|
||
</g>
|
||
|
||
<!-- 唱片图标 -->
|
||
<g v-else-if="name === 'disc'">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
</g>
|
||
|
||
<!-- 视频图标 -->
|
||
<g v-else-if="name === 'video'">
|
||
<path d="m22 8-6 4 6 4V8Z" />
|
||
<rect width="14" height="12" x="2" y="6" rx="2" ry="2" />
|
||
</g>
|
||
|
||
<!-- 目标/选中图标 -->
|
||
<g v-else-if="name === 'target'">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<circle cx="12" cy="12" r="6" />
|
||
<circle cx="12" cy="12" r="2" />
|
||
</g>
|
||
|
||
<!-- 展开/全屏图标 -->
|
||
<g v-else-if="name === 'maximize-2'">
|
||
<polyline points="15 3 21 3 21 9" />
|
||
<polyline points="9 21 3 21 3 15" />
|
||
<line x1="21" y1="3" x2="14" y2="10" />
|
||
<line x1="3" y1="21" x2="10" y2="14" />
|
||
</g>
|
||
|
||
<!-- 拇指向上 -->
|
||
<g v-else-if="name === 'thumbs-up'">
|
||
<path
|
||
d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 实心拇指向上 -->
|
||
<g v-else-if="name === 'thumbs-up-filled'" fill="currentColor" stroke="none">
|
||
<path
|
||
d="M7 10v12H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h3Zm2 12V10.65l3.12-7.02A2.75 2.75 0 0 1 17 6v3h2.59a3 3 0 0 1 2.96 3.49l-1.17 7A3 3 0 0 1 18.42 22H9Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 扬声器/广播图标 -->
|
||
<g v-else-if="name === 'speaker'">
|
||
<rect height="20" rx="2" ry="2" width="16" x="4" y="2" />
|
||
<circle cx="12" cy="14" r="4" />
|
||
<circle cx="12" cy="6" r="2" />
|
||
</g>
|
||
|
||
<!-- 通知图标 -->
|
||
<g v-else-if="name === 'bell-ring'">
|
||
<path d="M10.268 21a2 2 0 0 0 3.464 0" />
|
||
<path d="M22 8c0-2.3-.8-4.3-2-6" />
|
||
<path
|
||
d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
|
||
/>
|
||
<path d="M4 2C2.8 3.7 2 5.7 2 8" />
|
||
</g>
|
||
|
||
<g v-else-if="name === 'bell'">
|
||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||
</g>
|
||
|
||
<!-- 查看状态图标 -->
|
||
<g v-else-if="name === 'eye'">
|
||
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
</g>
|
||
|
||
<!-- 日历图标 -->
|
||
<g v-else-if="name === 'calendar'">
|
||
<rect height="18" rx="2" ry="2" width="18" x="3" y="4" />
|
||
<line x1="16" x2="16" y1="2" y2="6" />
|
||
<line x1="8" x2="8" y1="2" y2="6" />
|
||
<line x1="3" x2="21" y1="10" y2="10" />
|
||
</g>
|
||
|
||
<!-- 时钟图标 -->
|
||
<g v-else-if="name === 'clock'">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<polyline points="12,6 12,12 16,14" />
|
||
</g>
|
||
|
||
<!-- 用户图标 -->
|
||
<g v-else-if="name === 'user'">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||
<circle cx="12" cy="7" r="4" />
|
||
</g>
|
||
|
||
<!-- 用户组/多用户图标 -->
|
||
<g v-else-if="name === 'users' || name === 'group'">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</g>
|
||
|
||
<!-- 设置图标 -->
|
||
<g v-else-if="name === 'settings'" fill="currentColor" stroke="none" stroke-width="0">
|
||
<path
|
||
d="M12.02 9Q12.84 9 13.52 9.41Q14.21 9.82 14.6 10.51Q15 11.21 15 12.02Q15 12.84 14.6 13.52Q14.21 14.21 13.52 14.6Q12.84 15 12 15Q11.18 15 10.49 14.59Q9.79 14.18 9.4 13.49Q9 12.79 9 11.98Q9 11.16 9.41 10.48Q9.82 9.79 10.51 9.4Q11.21 9 12.02 9ZM12.05 7.51Q10.82 7.51 9.78 8.11Q8.74 8.71 8.12 9.73Q7.51 10.75 7.51 11.98Q7.51 13.2 8.11 14.24Q8.71 15.29 9.74 15.9Q10.78 16.51 12 16.51Q13.22 16.51 14.26 15.91Q15.29 15.31 15.9 14.28Q16.51 13.25 16.51 12.02Q16.51 10.8 15.91 9.77Q15.31 8.74 14.29 8.12Q13.27 7.51 12.05 7.51ZM13.56 22.66Q14.02 22.66 14.4 22.4Q14.78 22.15 14.98 21.74L15.79 19.85L15.98 19.75Q16.42 19.49 16.85 19.22L18.91 19.49Q19.39 19.54 19.8 19.33Q20.21 19.13 20.45 18.72L22.03 15.98Q22.27 15.58 22.24 15.12Q22.2 14.66 21.94 14.28L20.69 12.6L20.69 11.42L21.94 9.74Q22.22 9.36 22.25 8.9Q22.27 8.45 22.03 8.04L20.45 5.28Q20.23 4.9 19.82 4.68Q19.42 4.46 18.94 4.51L16.85 4.78Q16.42 4.46 15.86 4.2L15.02 2.23Q14.83 1.82 14.45 1.56Q14.06 1.3 13.61 1.3L10.44 1.3Q9.98 1.3 9.59 1.56Q9.19 1.82 9 2.23L8.16 4.2L7.92 4.34Q7.73 4.44 7.55 4.54Q7.37 4.63 7.2 4.75L5.09 4.51Q4.63 4.44 4.21 4.64Q3.79 4.85 3.55 5.26L1.97 8.02Q1.73 8.4 1.76 8.87Q1.8 9.34 2.06 9.72L3.34 11.42L3.34 12.53L2.06 14.23Q1.78 14.62 1.75 15.07Q1.73 15.53 1.97 15.94L3.53 18.67Q3.77 19.08 4.18 19.28Q4.58 19.49 5.06 19.44L7.13 19.2Q7.8 19.63 8.14 19.8L8.98 21.72Q9.14 22.15 9.53 22.4Q9.91 22.66 10.39 22.66L13.56 22.66ZM7.08 17.66L4.8 17.9L3.22 15.1L4.58 13.27Q4.8 12.94 4.8 12.6Q4.78 12.31 4.78 11.95Q4.78 11.59 4.8 11.3Q4.8 10.92 4.58 10.61L3.22 8.74L4.85 5.95L7.15 6.24Q7.37 6.26 7.55 6.22Q7.73 6.17 7.87 6.07Q8.3 5.76 8.93 5.47Q9.29 5.28 9.43 4.94L10.39 2.78L13.61 2.81L14.52 4.94Q14.64 5.26 15.02 5.47Q15.55 5.71 16.1 6.1Q16.46 6.34 16.82 6.26L19.13 6.02L20.71 8.83L19.37 10.63Q19.1 10.92 19.15 11.33Q19.18 11.64 19.18 12.01Q19.18 12.38 19.15 12.67Q19.13 13.06 19.37 13.37L20.71 15.19L19.08 17.98L16.85 17.71Q16.66 17.69 16.46 17.72Q16.27 17.76 16.13 17.88Q15.6 18.26 15 18.53Q14.83 18.62 14.69 18.76Q14.54 18.89 14.47 19.06L13.56 21.14L10.34 21.12L9.46 19.03Q9.29 18.67 8.95 18.5Q8.47 18.29 7.85 17.88Q7.58 17.69 7.25 17.69Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 关闭/叉叉图标 -->
|
||
<g v-else-if="name === 'x' || name === 'close'">
|
||
<line x1="18" x2="6" y1="6" y2="18" />
|
||
<line x1="6" x2="18" y1="6" y2="18" />
|
||
</g>
|
||
|
||
<!-- 信息图标 -->
|
||
<g v-else-if="name === 'info'">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="16" x2="12" y2="12" />
|
||
<circle cx="12" cy="8" r="1" fill="currentColor" />
|
||
</g>
|
||
|
||
<!-- 成功/勾选图标 -->
|
||
<g v-else-if="name === 'check' || name === 'success'">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</g>
|
||
|
||
<!-- 错误/叉叉图标 -->
|
||
<g v-else-if="name === 'error' || name === 'x-circle' || name === 'alert-circle'">
|
||
<circle
|
||
cx="12"
|
||
cy="12"
|
||
r="10"
|
||
fill="currentColor"
|
||
fill-opacity="0.1"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
/>
|
||
<line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2" />
|
||
<line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2" />
|
||
</g>
|
||
|
||
<!-- 警告图标 -->
|
||
<g v-else-if="name === 'warning' || name === 'alert-triangle'">
|
||
<path
|
||
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
|
||
fill="currentColor"
|
||
fill-opacity="0.1"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
/>
|
||
<line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2" />
|
||
<circle cx="12" cy="17" r="1" fill="currentColor" stroke="none" />
|
||
</g>
|
||
|
||
<!-- 上一首图标 -->
|
||
<g
|
||
v-else-if="name === 'skip-back' || name === 'previous'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
>
|
||
<path
|
||
d="M9.07 10.82Q8.64 11.09 8.47 11.54Q8.3 12 8.47 12.46Q8.64 12.91 9.07 13.18L17.71 18.17Q18.17 18.41 18.64 18.31Q19.1 18.22 19.43 17.84Q19.75 17.47 19.75 16.97L19.75 7.01Q19.75 6.5 19.43 6.14Q19.1 5.78 18.62 5.69Q18.14 5.59 17.71 5.83L9.07 10.82ZM5.26 17.71Q5.66 17.71 5.95 17.42Q6.24 17.14 6.24 16.7L6.24 7.18Q6.24 6.77 5.95 6.47Q5.66 6.17 5.26 6.17Q4.85 6.17 4.55 6.47Q4.25 6.77 4.25 7.18L4.25 16.7Q4.25 17.14 4.55 17.42Q4.85 17.71 5.26 17.71Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 下一首图标 -->
|
||
<g
|
||
v-else-if="name === 'skip-forward' || name === 'next'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
>
|
||
<path
|
||
d="M6.29 5.83Q5.86 5.59 5.38 5.69Q4.9 5.78 4.57 6.14Q4.25 6.5 4.25 7.01L4.25 16.97Q4.25 17.47 4.57 17.84Q4.9 18.22 5.36 18.31Q5.83 18.41 6.29 18.17L14.9 13.18Q15.34 12.91 15.5 12.46Q15.67 12 15.5 11.54Q15.34 11.09 14.9 10.82L6.29 5.83ZM18.74 17.71Q19.15 17.71 19.45 17.42Q19.75 17.14 19.75 16.7L19.75 7.18Q19.75 6.77 19.45 6.47Q19.15 6.17 18.74 6.17Q18.34 6.17 18.05 6.47Q17.76 6.77 17.76 7.18L17.76 16.7Q17.76 17.14 18.05 17.42Q18.34 17.71 18.74 17.71Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 快退图标 -->
|
||
<g v-else-if="name === 'rewind'">
|
||
<polygon fill="currentColor" points="11,19 2,12 11,5" />
|
||
<polygon fill="currentColor" points="22,19 13,12 22,5" />
|
||
</g>
|
||
|
||
<!-- 快进图标 -->
|
||
<g v-else-if="name === 'fast-forward'">
|
||
<polygon fill="currentColor" points="13,19 22,12 13,5" />
|
||
<polygon fill="currentColor" points="2,19 11,12 2,5" />
|
||
</g>
|
||
|
||
<!-- 歌词图标 -->
|
||
<g v-else-if="name === 'lyrics'">
|
||
<!-- 音符基础形状 -->
|
||
<path d="M9 18V5l12-2v13" fill="none" stroke="currentColor" stroke-width="1.5" />
|
||
<circle cx="6" cy="18" fill="currentColor" r="3" />
|
||
<circle cx="18" cy="16" fill="currentColor" r="3" />
|
||
<!-- 歌词文本线条 -->
|
||
<line
|
||
stroke="currentColor"
|
||
stroke-linecap="round"
|
||
stroke-width="1.5"
|
||
x1="2"
|
||
x2="7"
|
||
y1="8"
|
||
y2="8"
|
||
/>
|
||
<line
|
||
stroke="currentColor"
|
||
stroke-linecap="round"
|
||
stroke-width="1.5"
|
||
x1="2"
|
||
x2="9"
|
||
y1="12"
|
||
y2="12"
|
||
/>
|
||
<line
|
||
stroke="currentColor"
|
||
stroke-linecap="round"
|
||
stroke-width="1.5"
|
||
x1="2"
|
||
x2="6"
|
||
y1="16"
|
||
y2="16"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 刷新图标 -->
|
||
<g v-else-if="name === 'refresh' || name === 'rotate-cw'">
|
||
<polyline points="23 4 23 10 17 10" />
|
||
<polyline points="1 20 1 14 7 14" />
|
||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
||
</g>
|
||
|
||
<!-- 垃圾桶/删除图标 -->
|
||
<g v-else-if="name === 'trash' || name === 'delete'">
|
||
<polyline points="3 6 5 6 21 6" />
|
||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||
<line x1="10" x2="10" y1="11" y2="17" />
|
||
<line x1="14" x2="14" y1="11" y2="17" />
|
||
</g>
|
||
|
||
<!-- 加载中图标 -->
|
||
<g v-else-if="name === 'loader' || name === 'spinner'">
|
||
<line x1="12" x2="12" y1="2" y2="6" />
|
||
<line x1="12" x2="12" y1="18" y2="22" />
|
||
<line x1="4.93" x2="7.76" y1="4.93" y2="7.76" />
|
||
<line x1="16.24" x2="19.07" y1="16.24" y2="19.07" />
|
||
<line x1="2" x2="6" y1="12" y2="12" />
|
||
<line x1="18" x2="22" y1="12" y2="12" />
|
||
<line x1="4.93" x2="7.76" y1="19.07" y2="16.24" />
|
||
<line x1="16.24" x2="19.07" y1="7.76" y2="4.93" />
|
||
</g>
|
||
|
||
<!-- 加号/添加图标 -->
|
||
<g v-else-if="name === 'plus' || name === 'add'">
|
||
<line x1="12" x2="12" y1="5" y2="19" />
|
||
<line x1="5" x2="19" y1="12" y2="12" />
|
||
</g>
|
||
|
||
<!-- 编辑图标 -->
|
||
<g v-else-if="name === 'edit' || name === 'pencil'">
|
||
<path d="M12 20h9" />
|
||
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
|
||
</g>
|
||
|
||
<!-- 历史记录图标 -->
|
||
<g v-else-if="name === 'history'">
|
||
<path d="M12 2a10 10 0 1 0 10 10 10 10 0 0 0-10-10z" />
|
||
<polyline points="12 6 12 12 16 14" />
|
||
</g>
|
||
|
||
<!-- 歌单/列表图标 -->
|
||
<g
|
||
v-else-if="
|
||
name === 'playlist' || name === 'list' || name === 'order' || name === 'list-ordered'
|
||
"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
>
|
||
<path
|
||
d="M11.76 5.06Q12.07 5.06 12.3 4.85Q12.53 4.63 12.53 4.32Q12.53 4.01 12.3 3.79Q12.07 3.58 11.76 3.58L3.29 3.58Q2.98 3.58 2.75 3.79Q2.52 4.01 2.52 4.32Q2.52 4.63 2.75 4.85Q2.98 5.06 3.29 5.06L11.76 5.06ZM12.53 10.32Q12.53 10.01 12.3 9.79Q12.07 9.58 11.76 9.58L3.29 9.58Q2.98 9.58 2.75 9.79Q2.52 10.01 2.52 10.32Q2.52 10.63 2.75 10.85Q2.98 11.06 3.29 11.06L11.76 11.06Q12.07 11.06 12.3 10.85Q12.53 10.63 12.53 10.32ZM3.29 15.58Q2.98 15.58 2.75 15.79Q2.52 16.01 2.52 16.32Q2.52 16.63 2.75 16.85Q2.98 17.06 3.29 17.06L7.75 17.06Q8.06 17.06 8.28 16.85Q8.5 16.63 8.5 16.32Q8.5 16.01 8.28 15.79Q8.06 15.58 7.75 15.58L3.29 15.58Z"
|
||
/>
|
||
<path
|
||
d="M18.36 3.89Q17.86 3.94 17.53 4.31Q17.21 4.68 17.21 5.21L17.23 6.91L17.23 13.13Q17.23 13.44 17.11 13.67Q16.99 13.9 16.75 14.09Q16.42 14.35 15.41 14.74L15.34 14.76Q14.14 15.24 13.38 15.74Q12.62 16.25 12.26 17.16Q12.05 17.76 12.13 18.36Q12.22 18.96 12.6 19.44Q13.1 20.06 13.94 20.3Q14.78 20.54 15.53 20.45Q17.35 20.23 18.04 19.01Q18.72 17.78 18.72 16.37L18.72 6.94Q18.77 6.53 18.92 6.38Q19.08 6.24 19.46 6.12Q20.09 5.88 20.38 5.69Q21.05 5.28 21.3 4.73Q21.55 4.18 21.41 3.5L18.36 3.89ZM15.36 18.98Q14.83 19.03 14.41 18.91Q13.99 18.79 13.78 18.53Q13.66 18.34 13.62 18.13Q13.58 17.93 13.68 17.69Q13.87 17.18 14.41 16.86Q14.95 16.54 15.89 16.15L15.96 16.13L16.1 16.06Q16.42 15.94 16.72 15.8Q17.02 15.67 17.21 15.55L17.21 16.63Q17.21 17.4 16.85 18.13Q16.49 18.86 15.36 18.98Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 登出/退出图标 -->
|
||
<g v-else-if="name === 'logout' || name === 'log-out'">
|
||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||
<polyline points="16 17 21 12 16 7" />
|
||
<line x1="21" x2="9" y1="12" y2="12" />
|
||
</g>
|
||
|
||
<!-- 下载图标 -->
|
||
<g v-else-if="name === 'download'">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="7 10 12 15 17 10" />
|
||
<line x1="12" x2="12" y1="15" y2="3" />
|
||
</g>
|
||
|
||
<!-- 重播/循环图标 -->
|
||
<g v-else-if="name === 'repeat'">
|
||
<polyline points="17 1 21 5 17 9" />
|
||
<path d="M3 11V9a4 4 0 0 1 4-4h14" />
|
||
<polyline points="7 23 3 19 7 15" />
|
||
<path d="M21 13v2a4 4 0 0 1-4 4H3" />
|
||
</g>
|
||
|
||
<!-- 单曲循环图标 -->
|
||
<g v-else-if="name === 'repeat-one'" fill="currentColor" stroke="none" stroke-width="0">
|
||
<path
|
||
d="M12.65 14.95Q12.94 14.95 13.09 14.78Q13.25 14.62 13.25 14.3L13.25 9.67Q13.25 9.12 12.89 9.05Q12.53 8.98 11.95 9.24L10.97 9.82Q10.61 10.01 10.54 10.2Q10.46 10.39 10.54 10.63Q10.58 10.8 10.81 10.86Q11.04 10.92 11.3 10.78L12.07 10.34L12.07 14.33Q12.07 14.64 12.22 14.8Q12.36 14.95 12.65 14.95Z"
|
||
/>
|
||
<path
|
||
d="M16.66 7.27L19.63 7.27Q19.78 7.27 19.88 7.16Q19.99 7.06 19.99 6.91Q19.99 6.77 19.87 6.65L16.99 3.84Q16.9 3.72 16.75 3.72Q16.61 3.72 16.5 3.83Q16.39 3.94 16.39 4.08L16.39 5.76L7.32 5.76Q5.62 5.76 4.18 6.6Q2.74 7.44 1.9 8.88Q1.06 10.32 1.06 12Q1.06 13.63 1.85 15.05Q2.02 15.36 2.33 15.42Q2.64 15.48 2.88 15.34Q3.14 15.17 3.23 14.87Q3.31 14.57 3.17 14.3Q2.57 13.27 2.57 12Q2.57 10.7 3.2 9.62Q3.84 8.54 4.93 7.91Q6.02 7.27 7.32 7.27ZM22.15 8.95Q22.01 8.69 21.7 8.6Q21.38 8.52 21.12 8.66Q20.86 8.81 20.77 9.11Q20.69 9.41 20.83 9.67Q21.43 10.73 21.43 11.98Q21.43 13.27 20.8 14.36Q20.16 15.46 19.07 16.09Q17.98 16.73 16.68 16.73L7.34 16.73L4.37 16.73Q4.22 16.73 4.13 16.84Q4.03 16.94 4.03 17.09Q4.03 17.23 4.13 17.33L7.01 20.16Q7.1 20.26 7.25 20.26Q7.39 20.26 7.5 20.15Q7.61 20.04 7.61 19.9L7.61 18.22L16.68 18.22Q18.38 18.22 19.82 17.38Q21.26 16.54 22.1 15.1Q22.94 13.66 22.94 11.98Q22.94 10.32 22.15 8.95Z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 搜索图标 -->
|
||
<g v-else-if="name === 'search'">
|
||
<circle cx="11" cy="11" r="8" />
|
||
<line x1="21" x2="16.65" y1="21" y2="16.65" />
|
||
</g>
|
||
|
||
<!-- 麦克风图标 -->
|
||
<g v-else-if="name === 'mic' || name === 'microphone'">
|
||
<rect width="8" height="12" x="8" y="3" rx="4" ry="4" />
|
||
<path d="M19 11a7 7 0 0 1-14 0" />
|
||
<line x1="12" x2="12" y1="18" y2="22" />
|
||
<line x1="8" x2="16" y1="22" y2="22" />
|
||
</g>
|
||
|
||
<!-- 上传图标 -->
|
||
<g v-else-if="name === 'upload'">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="17 8 12 3 7 8" />
|
||
<line x1="12" x2="12" y1="3" y2="15" />
|
||
</g>
|
||
|
||
<!-- 外部链接图标 -->
|
||
<g v-else-if="name === 'external-link'">
|
||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||
<polyline points="15 3 21 3 21 9" />
|
||
<line x1="10" y1="14" x2="21" y2="3" />
|
||
</g>
|
||
|
||
<!-- 云上传图标 -->
|
||
<g v-else-if="name === 'cloud-upload'">
|
||
<path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" />
|
||
<polyline points="16 16 12 12 8 16" />
|
||
<line x1="12" y1="12" x2="12" y2="21" />
|
||
</g>
|
||
|
||
<!-- 主题切换图标 -->
|
||
<g v-else-if="name === 'gift'" fill="currentColor" stroke="none" stroke-width="0" transform="scale(0.0234375)">
|
||
<path
|
||
d="M772.8 96v64l163.2 161.6-91.2 91.2c-12.8-11.2-27.2-16-43.2-16-36.8 0-65.6 28.8-65.6 65.6V800c0 35.2-28.8 64-64 64H352c-35.2 0-64-28.8-64-64V462.4c0-36.8-28.8-65.6-65.6-65.6-16 0-32 6.4-43.2 16l-91.2-91.2L249.6 160h40l1.6 1.6C336 228.8 420.8 272 512 272c91.2 0 176-41.6 220.8-110.4 0-1.6 1.6-1.6 1.6-1.6h38.4V96M291.2 96H256c-22.4 0-38.4 6.4-49.6 19.2L43.2 276.8c-25.6 25.6-25.6 65.6 0 89.6l94.4 94.4c11.2 11.2 27.2 17.6 41.6 17.6s30.4-6.4 41.6-17.6h1.6c1.6 0 1.6 0 1.6 1.6V800c0 70.4 57.6 128 128 128h320c70.4 0 128-57.6 128-128V462.4c0-1.6 0-1.6 1.6-1.6h1.6c11.2 11.2 27.2 17.6 41.6 17.6 16 0 30.4-6.4 41.6-17.6l94.4-94.4c25.6-25.6 25.6-65.6 0-89.6L819.2 115.2c-12.8-12.8-28.8-19.2-46.4-19.2h-40c-22.4 0-41.6 11.2-54.4 30.4-33.6 49.6-96 81.6-168 81.6s-134.4-33.6-168-81.6C332.8 107.2 312 96 291.2 96z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 语言/翻译图标 (文 / A) -->
|
||
<g
|
||
v-else-if="name === 'globe' || name === 'language' || name === 'translate'"
|
||
fill="currentColor"
|
||
stroke="none"
|
||
stroke-width="0"
|
||
>
|
||
<path
|
||
d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
|
||
/>
|
||
</g>
|
||
|
||
<!-- 默认图标（如果没有匹配的图标） -->
|
||
<circle v-else cx="12" cy="12" r="10" />
|
||
</svg>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
name: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
size: {
|
||
type: [String, Number],
|
||
default: 24
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: 'currentColor'
|
||
},
|
||
className: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.icon {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
transition: all 0.2s ease;
|
||
/* 确保SVG在所有设备上渲染一致 */
|
||
shape-rendering: geometricPrecision;
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.icon:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
</style>
|