找找图标

设置 SVG 图标

withicons-coquettesettings

来自 with icons Coquette 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。

图标 ID
withicons-coquette:settings
中文名
设置
集合规模
1,000 枚
基础网格
24px
色彩
多色
开源协议
MIT
作者
Evergrow

下载 设置 图标

SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。

px

PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。

设置 的预览与使用场景

切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色
设置 图标 浅色背景预览浅色背景
设置 图标 深色背景预览深色背景
设置 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索设置…输入框 · 前缀图标
设置导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41设置 App 图标设置settings-2手机桌面 · App 图标
设置withicons-coquette.design/icons/settings浏览器 · 标签页与站点图标

各尺寸下的可读性

设置 图标 24px 渲染24px设置 图标 32px 渲染32px设置 图标 48px 渲染48px设置 图标 64px 渲染64px设置 图标 96px 渲染96px设置 图标 128px 渲染128px

复制 设置 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="#a8345c" fill-opacity=".2" d="m10.1 5.73l-1.3.55l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.8 6.74c-.74.74.73 2.21.98 2.56l-.58 1.33c-.39.08-2.49.12-2.49 1.17v2c0 1.01 2.18 1.13 2.52 1.2l.55 1.3l-.99 1.4c-.24.35-.28.88.04 1.2l1.41 1.4c.74.74 2.21-.73 2.56-.98l1.33.58c.08.39.12 2.49 1.17 2.49h2c1.01 0 1.13-2.18 1.2-2.52l1.3-.55l1.4.99c.35.24.88.28 1.2-.04l1.4-1.41c.74-.74-.73-2.21-.98-2.56l.58-1.33c.39-.08 2.49-.12 2.49-1.17v-2c0-1.01-2.18-1.13-2.52-1.2l-.55-1.3l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.74-.74-2.21.73-2.56.98l-1.33-.58c-.13-.61-.12-2.5-1.27-2.5h-1.8c-1.16 0-1.17 1.93-1.3 2.53" class="wm-shadow"/><path fill="#7e2443" d="m10.19 3.1l-.3 1.7c-.03.16-1.17.57-1.39.68l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.5 5.94c-.31.31-.23.84 0 1.17l.98 1.39c-.1.21-.56 1.37-.68 1.39l-1.7.3c-.32.06-.69.47-.69.81v2c0 .39.43.77.79.83l1.6.28c.16.03.57 1.17.68 1.39l-.99 1.4c-.24.35-.28.88.04 1.2l1.41 1.4c.31.31.84.23 1.17 0l1.39-.98c.21.1 1.37.56 1.39.68l.3 1.7c.06.32.47.69.81.69h2c.39 0 .77-.43.83-.79l.28-1.6c.03-.16 1.17-.57 1.39-.68l1.4.99c.35.24.88.28 1.2-.04l1.4-1.41c.31-.31.23-.84 0-1.17l-.98-1.39c.1-.21.56-1.37.68-1.39l1.7-.3c.32-.06.69-.47.69-.81v-2c0-.39-.43-.77-.79-.83l-1.6-.28c-.16-.03-.57-1.17-.68-1.39l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.31-.31-.84-.23-1.17 0l-1.39.98c-.21-.1-1.37-.56-1.39-.68l-.3-1.7c-.07-.39-.53-.7-.91-.7h-1.8c-.38 0-.84.31-.91.7" class="wm-k"/><path fill="#f8bccb" d="M11 3.07c-.13.19-.13-.04-.2.29c-.07.34-.05 1.83-.7 2.14l-.7.26c-.27.12-.84.54-1.2.28L6.7 5.01l-.2-.07l-.2.09L5 6.34c-.13.13 0 .36.07.46l.97 1.4c.26.36-.17.94-.28 1.2c-.21.51-.25 1.01-.86 1.12l-1.6.29c-.12.02-.25.16-.25.29v1.8c0 .47 1.37.49 1.85.58c.6.11.65.62.86 1.12c.12.27.54.84.28 1.2l-1.03 1.5l-.07.2l.09.2L6.34 19c.13.13.36 0 .46-.07l1.4-.97c.36-.26.94.17 1.2.28c.51.21 1.01.25 1.12.86l.29 1.6c.02.12.16.25.29.25h1.8c.47 0 .49-1.37.58-1.85c.11-.6.62-.65 1.12-.86c.27-.12.84-.54 1.2-.28l1.5 1.03l.2.07l.2-.09l1.3-1.31c.13-.13 0-.36-.07-.46l-.97-1.4c-.26-.36.17-.94.28-1.2c.21-.51.25-1.01.86-1.12l1.6-.29c.12-.02.25-.16.25-.29v-1.8c0-.47-1.37-.49-1.85-.58c-.6-.11-.65-.62-.86-1.12c-.12-.27-.54-.84-.28-1.2l1.03-1.5l.07-.2l-.09-.2L17.66 5c-.13-.13-.36 0-.46.07l-1.4.97c-.36.26-.94-.17-1.2-.28c-.51-.21-1.01-.25-1.12-.86l-.29-1.6l-.14-.2l-.25-.06c-.6-.01-1.2.02-1.8.03" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="M12.9 3.06c.21 1.38 0 1.04.5 1.78l.04-.14l-.25-1.4c-.07-.35-.13-.11-.29-.24m5.7 3.02l-1 1.45c-.3.44.07.87.24 1.27c.38.91.07.46.46.95c0-.05.03-.1.01-.15l-.43-1c-.16-.38.95-1.74 1.18-2.1c-.15-.19-.13-.24-.36-.47zm2 4.7c-.01.28.29 1.7-.35 1.82l-1.65.3c-.14.03-.38.16-.44.3l-.67 1.6c-.11.25.23.63.31.76l.44-.96c.21-.51.25-1.01.86-1.12l1.6-.29l.23-.19l.02-1.9c.01-.21-.22-.23-.35-.32M3.1 12.64l-.05.06l.02.3l.23.19c.23.05 1.36.23 1.86.31c-.39-.85-1.09-.7-2.06-.86m15.6 4.23l-.14.23l-1.19 1.2l-.27.16c-1.77-1.15-1.36-1.47-2.9-.82c-.38.16-1.01.24-1.1.76l-.28 1.6c-.02.14-.15.35-.32.35h-1.7c.01.16-.03.6.3.6h1.8c.17 0 .3-.21.32-.35l.26-1.5c.1-.59.63-.66 1.12-.86c.25-.11.84-.54 1.2-.28l1.5 1.03c.33.23.08.01.3.05l1.44-1.44c-.09-.34-.11-.4-.34-.73m-10.97.53l-1.33.93l-.3.12l-.2-.09l-.9-.89l-.04.13l1.44 1.44c.34-.09.06.13.4-.11L8.13 18c.48-.34 1.48.32 1.98.5c-.05-.18-.1-.45-.31-.54l-1.5-.65c-.18-.08-.42-.02-.57.09" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="M11.1 3.23c-.41 1.85-.07 2.01-1.7 2.69c-.53.22-1.23.62-1.8.23l-1.3-.9l-.95.95l.95 1.4c.14.22.14.66.04.9l-.73 1.7c-.3.7-1.98.74-2.28.8v1.2c1.84.41 2.01.18 2.68 1.8c.28.67.62 1.2.15 1.9l-.8 1.2l.84.84l.1.02L7.71 17c.49-.34 1.17.11 1.59.29c1.63.7 1.39.82 1.8 2.68h1.2c.41-1.84.18-2.01 1.8-2.68c.52-.22 1.13-.63 1.7-.24l1.3.9l.1-.01l.84-.84l.02-.1l-.96-1.41c-.34-.49.11-1.17.29-1.59c.7-1.63.82-1.39 2.68-1.8V11c-1.84-.41-2.01-.18-2.68-1.8c-.22-.52-.63-1.13-.24-1.7l.9-1.3l-.01-.1l-.84-.84l-1.4.95c-.51.34-1.28-.12-1.7-.3c-1.63-.7-1.39-.82-1.8-2.68z" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="m11.2 3.37l-.14.23l-.28 1.5c-.04.21-.27.53-.48.62l-1.5.64c-.28.13-.66.03-.9-.14l-1.2-.84l-.2-.06c-1.2 1.14-1.56.89-.69 1.88c.39-.37.8-.74 1.19-1.12l.25.12l1.25.87c.26.18.62.18.9.05l1.4-.6c.67-.29.76-1.97.83-2.32l.17-.06h1l.1-.04l.09-.2c0-.98-1.09-.54-1.79-.53m6.1 2l-1.3.9c-.62.43-1.42-.19-2-.41l-.1.05l-.08.19c.11.17.17.32.38.41l1.4.61c.28.12.64.13.9-.05L18.03 6l.05-.1c-.16-.18-.44-.77-.78-.53M6.5 8.69l-.14.11l-.59 1.4c-.14.32-.43.54-.77.6l-1.4.26l-.22.14c-.01.54.01 1.09.02 1.63c.37.13.17.03.4.07c.02-.27.04-.53.05-.8l.08-.2l1.57-.3c.69-.13.81-.74 1.05-1.3c.1-.23.32-.62.36-.9c.04-.31-.1-.45-.23-.7zm12.3 2.17l-.06.14c.25.38.43.47.86.62l.2-.13l.1-.39l-.1-.14l-.9-.15zM5.33 17.4l.03.2c.14.14.29.26.44.38l.21-.08c.46-.54 1.27-1.48.69-2.24l-.1-.05l-.2.12c-.36.55-.7 1.13-1.07 1.67" class="wm-shine"/><path fill="#7e2443" d="M11.2 8.08c-.78.16-1.49.55-2.05 1.12c-2.77 2.77-.16 7.5 3.65 6.72c.77-.16 1.5-.55 2.05-1.12c2.72-2.8.19-7.51-3.65-6.72" class="wm-k"/><path fill="#fceadd" d="M11.3 8.67c-3.25.7-3.65 5.18-.6 6.47c.62.26 1.34.33 2 .19c3.25-.7 3.65-5.18.6-6.47c-.62-.26-1.34-.33-2-.19" class="wm-k"/><path fill="#f8bccb" fill-opacity=".85" d="M14.9 10.23c.06.55.16 1.19.03 1.77c-.43 1.84-2.45 3.23-4.33 2.55c-.61-.22-1.04-.53-1.52-.95l-.02.1c.32.42.58.81 1.04 1.12c3.03 2.02 6.49-1.28 4.8-4.59" class="wm-k"/><path fill="#fffbf6" fill-opacity=".47" d="M11.1 8.88c-3.58.88-2.38 6.19 1.2 5.45c3.6-.74 2.34-6.32-1.2-5.45" class="wm-k"/><path fill="#fff" fill-opacity=".9" d="m9.1 13.01l.1.04l.1-.04c.22-.61.21-1.23.56-1.81c.93-1.54 2.61-1.77 4.14-1.11c.07-.07.14-.13.21-.19c-2.36-2.37-6.23-.02-5.11 3.11" class="wm-shine"/><path fill="#7e2443" d="m10.23 12.3l1.27 1.17l.37.43l.13.07l.13-.07l.37-.43l1.07-.97c.32-.3.76-.81.73-1.3c-.06-.95-1.17-1.45-1.9-.84c-.25.21-.26.33-.4.64l-.18-.4c-.83-1.41-3.14.26-1.59 1.7" class="wm-k"/><path fill="#d7385f" d="M10.47 11.2c.09.24.13.42.33.6l1.2 1.11l1.1-1.01c.34-.31.32-.36.44-.7l-.08-.2c-.18-.19-.47-.25-.63 0c-.26.38-.32.84-.93.75a.73.73 0 0 1-.47-.25c-.17-.2-.44-1.11-.89-.5z" class="wm-k"/><path fill="#7e2443" fill-opacity=".34" d="m13.4 10.94l-.5.66l-1.09 1l-.04.1l.23.21c.59-.53 1.25-.97 1.54-1.71z" class="wm-k"/></g></svg>
reactReact 组件(TSX)
export function SettingsIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none"><path fill="#a8345c" fill-opacity=".2" d="m10.1 5.73l-1.3.55l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.8 6.74c-.74.74.73 2.21.98 2.56l-.58 1.33c-.39.08-2.49.12-2.49 1.17v2c0 1.01 2.18 1.13 2.52 1.2l.55 1.3l-.99 1.4c-.24.35-.28.88.04 1.2l1.41 1.4c.74.74 2.21-.73 2.56-.98l1.33.58c.08.39.12 2.49 1.17 2.49h2c1.01 0 1.13-2.18 1.2-2.52l1.3-.55l1.4.99c.35.24.88.28 1.2-.04l1.4-1.41c.74-.74-.73-2.21-.98-2.56l.58-1.33c.39-.08 2.49-.12 2.49-1.17v-2c0-1.01-2.18-1.13-2.52-1.2l-.55-1.3l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.74-.74-2.21.73-2.56.98l-1.33-.58c-.13-.61-.12-2.5-1.27-2.5h-1.8c-1.16 0-1.17 1.93-1.3 2.53" class="wm-shadow"/><path fill="#7e2443" d="m10.19 3.1l-.3 1.7c-.03.16-1.17.57-1.39.68l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.5 5.94c-.31.31-.23.84 0 1.17l.98 1.39c-.1.21-.56 1.37-.68 1.39l-1.7.3c-.32.06-.69.47-.69.81v2c0 .39.43.77.79.83l1.6.28c.16.03.57 1.17.68 1.39l-.99 1.4c-.24.35-.28.88.04 1.2l1.41 1.4c.31.31.84.23 1.17 0l1.39-.98c.21.1 1.37.56 1.39.68l.3 1.7c.06.32.47.69.81.69h2c.39 0 .77-.43.83-.79l.28-1.6c.03-.16 1.17-.57 1.39-.68l1.4.99c.35.24.88.28 1.2-.04l1.4-1.41c.31-.31.23-.84 0-1.17l-.98-1.39c.1-.21.56-1.37.68-1.39l1.7-.3c.32-.06.69-.47.69-.81v-2c0-.39-.43-.77-.79-.83l-1.6-.28c-.16-.03-.57-1.17-.68-1.39l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.31-.31-.84-.23-1.17 0l-1.39.98c-.21-.1-1.37-.56-1.39-.68l-.3-1.7c-.07-.39-.53-.7-.91-.7h-1.8c-.38 0-.84.31-.91.7" class="wm-k"/><path fill="#f8bccb" d="M11 3.07c-.13.19-.13-.04-.2.29c-.07.34-.05 1.83-.7 2.14l-.7.26c-.27.12-.84.54-1.2.28L6.7 5.01l-.2-.07l-.2.09L5 6.34c-.13.13 0 .36.07.46l.97 1.4c.26.36-.17.94-.28 1.2c-.21.51-.25 1.01-.86 1.12l-1.6.29c-.12.02-.25.16-.25.29v1.8c0 .47 1.37.49 1.85.58c.6.11.65.62.86 1.12c.12.27.54.84.28 1.2l-1.03 1.5l-.07.2l.09.2L6.34 19c.13.13.36 0 .46-.07l1.4-.97c.36-.26.94.17 1.2.28c.51.21 1.01.25 1.12.86l.29 1.6c.02.12.16.25.29.25h1.8c.47 0 .49-1.37.58-1.85c.11-.6.62-.65 1.12-.86c.27-.12.84-.54 1.2-.28l1.5 1.03l.2.07l.2-.09l1.3-1.31c.13-.13 0-.36-.07-.46l-.97-1.4c-.26-.36.17-.94.28-1.2c.21-.51.25-1.01.86-1.12l1.6-.29c.12-.02.25-.16.25-.29v-1.8c0-.47-1.37-.49-1.85-.58c-.6-.11-.65-.62-.86-1.12c-.12-.27-.54-.84-.28-1.2l1.03-1.5l.07-.2l-.09-.2L17.66 5c-.13-.13-.36 0-.46.07l-1.4.97c-.36.26-.94-.17-1.2-.28c-.51-.21-1.01-.25-1.12-.86l-.29-1.6l-.14-.2l-.25-.06c-.6-.01-1.2.02-1.8.03" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="M12.9 3.06c.21 1.38 0 1.04.5 1.78l.04-.14l-.25-1.4c-.07-.35-.13-.11-.29-.24m5.7 3.02l-1 1.45c-.3.44.07.87.24 1.27c.38.91.07.46.46.95c0-.05.03-.1.01-.15l-.43-1c-.16-.38.95-1.74 1.18-2.1c-.15-.19-.13-.24-.36-.47zm2 4.7c-.01.28.29 1.7-.35 1.82l-1.65.3c-.14.03-.38.16-.44.3l-.67 1.6c-.11.25.23.63.31.76l.44-.96c.21-.51.25-1.01.86-1.12l1.6-.29l.23-.19l.02-1.9c.01-.21-.22-.23-.35-.32M3.1 12.64l-.05.06l.02.3l.23.19c.23.05 1.36.23 1.86.31c-.39-.85-1.09-.7-2.06-.86m15.6 4.23l-.14.23l-1.19 1.2l-.27.16c-1.77-1.15-1.36-1.47-2.9-.82c-.38.16-1.01.24-1.1.76l-.28 1.6c-.02.14-.15.35-.32.35h-1.7c.01.16-.03.6.3.6h1.8c.17 0 .3-.21.32-.35l.26-1.5c.1-.59.63-.66 1.12-.86c.25-.11.84-.54 1.2-.28l1.5 1.03c.33.23.08.01.3.05l1.44-1.44c-.09-.34-.11-.4-.34-.73m-10.97.53l-1.33.93l-.3.12l-.2-.09l-.9-.89l-.04.13l1.44 1.44c.34-.09.06.13.4-.11L8.13 18c.48-.34 1.48.32 1.98.5c-.05-.18-.1-.45-.31-.54l-1.5-.65c-.18-.08-.42-.02-.57.09" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="M11.1 3.23c-.41 1.85-.07 2.01-1.7 2.69c-.53.22-1.23.62-1.8.23l-1.3-.9l-.95.95l.95 1.4c.14.22.14.66.04.9l-.73 1.7c-.3.7-1.98.74-2.28.8v1.2c1.84.41 2.01.18 2.68 1.8c.28.67.62 1.2.15 1.9l-.8 1.2l.84.84l.1.02L7.71 17c.49-.34 1.17.11 1.59.29c1.63.7 1.39.82 1.8 2.68h1.2c.41-1.84.18-2.01 1.8-2.68c.52-.22 1.13-.63 1.7-.24l1.3.9l.1-.01l.84-.84l.02-.1l-.96-1.41c-.34-.49.11-1.17.29-1.59c.7-1.63.82-1.39 2.68-1.8V11c-1.84-.41-2.01-.18-2.68-1.8c-.22-.52-.63-1.13-.24-1.7l.9-1.3l-.01-.1l-.84-.84l-1.4.95c-.51.34-1.28-.12-1.7-.3c-1.63-.7-1.39-.82-1.8-2.68z" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="m11.2 3.37l-.14.23l-.28 1.5c-.04.21-.27.53-.48.62l-1.5.64c-.28.13-.66.03-.9-.14l-1.2-.84l-.2-.06c-1.2 1.14-1.56.89-.69 1.88c.39-.37.8-.74 1.19-1.12l.25.12l1.25.87c.26.18.62.18.9.05l1.4-.6c.67-.29.76-1.97.83-2.32l.17-.06h1l.1-.04l.09-.2c0-.98-1.09-.54-1.79-.53m6.1 2l-1.3.9c-.62.43-1.42-.19-2-.41l-.1.05l-.08.19c.11.17.17.32.38.41l1.4.61c.28.12.64.13.9-.05L18.03 6l.05-.1c-.16-.18-.44-.77-.78-.53M6.5 8.69l-.14.11l-.59 1.4c-.14.32-.43.54-.77.6l-1.4.26l-.22.14c-.01.54.01 1.09.02 1.63c.37.13.17.03.4.07c.02-.27.04-.53.05-.8l.08-.2l1.57-.3c.69-.13.81-.74 1.05-1.3c.1-.23.32-.62.36-.9c.04-.31-.1-.45-.23-.7zm12.3 2.17l-.06.14c.25.38.43.47.86.62l.2-.13l.1-.39l-.1-.14l-.9-.15zM5.33 17.4l.03.2c.14.14.29.26.44.38l.21-.08c.46-.54 1.27-1.48.69-2.24l-.1-.05l-.2.12c-.36.55-.7 1.13-1.07 1.67" class="wm-shine"/><path fill="#7e2443" d="M11.2 8.08c-.78.16-1.49.55-2.05 1.12c-2.77 2.77-.16 7.5 3.65 6.72c.77-.16 1.5-.55 2.05-1.12c2.72-2.8.19-7.51-3.65-6.72" class="wm-k"/><path fill="#fceadd" d="M11.3 8.67c-3.25.7-3.65 5.18-.6 6.47c.62.26 1.34.33 2 .19c3.25-.7 3.65-5.18.6-6.47c-.62-.26-1.34-.33-2-.19" class="wm-k"/><path fill="#f8bccb" fill-opacity=".85" d="M14.9 10.23c.06.55.16 1.19.03 1.77c-.43 1.84-2.45 3.23-4.33 2.55c-.61-.22-1.04-.53-1.52-.95l-.02.1c.32.42.58.81 1.04 1.12c3.03 2.02 6.49-1.28 4.8-4.59" class="wm-k"/><path fill="#fffbf6" fill-opacity=".47" d="M11.1 8.88c-3.58.88-2.38 6.19 1.2 5.45c3.6-.74 2.34-6.32-1.2-5.45" class="wm-k"/><path fill="#fff" fill-opacity=".9" d="m9.1 13.01l.1.04l.1-.04c.22-.61.21-1.23.56-1.81c.93-1.54 2.61-1.77 4.14-1.11c.07-.07.14-.13.21-.19c-2.36-2.37-6.23-.02-5.11 3.11" class="wm-shine"/><path fill="#7e2443" d="m10.23 12.3l1.27 1.17l.37.43l.13.07l.13-.07l.37-.43l1.07-.97c.32-.3.76-.81.73-1.3c-.06-.95-1.17-1.45-1.9-.84c-.25.21-.26.33-.4.64l-.18-.4c-.83-1.41-3.14.26-1.59 1.7" class="wm-k"/><path fill="#d7385f" d="M10.47 11.2c.09.24.13.42.33.6l1.2 1.11l1.1-1.01c.34-.31.32-.36.44-.7l-.08-.2c-.18-.19-.47-.25-.63 0c-.26.38-.32.84-.93.75a.73.73 0 0 1-.47-.25c-.17-.2-.44-1.11-.89-.5z" class="wm-k"/><path fill="#7e2443" fill-opacity=".34" d="m13.4 10.94l-.5.66l-1.09 1l-.04.1l.23.21c.59-.53 1.25-.97 1.54-1.71z" class="wm-k"/></g>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none"><path fill="#a8345c" fill-opacity=".2" d="m10.1 5.73l-1.3.55l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.8 6.74c-.74.74.73 2.21.98 2.56l-.58 1.33c-.39.08-2.49.12-2.49 1.17v2c0 1.01 2.18 1.13 2.52 1.2l.55 1.3l-.99 1.4c-.24.35-.28.88.04 1.2l1.41 1.4c.74.74 2.21-.73 2.56-.98l1.33.58c.08.39.12 2.49 1.17 2.49h2c1.01 0 1.13-2.18 1.2-2.52l1.3-.55l1.4.99c.35.24.88.28 1.2-.04l1.4-1.41c.74-.74-.73-2.21-.98-2.56l.58-1.33c.39-.08 2.49-.12 2.49-1.17v-2c0-1.01-2.18-1.13-2.52-1.2l-.55-1.3l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.74-.74-2.21.73-2.56.98l-1.33-.58c-.13-.61-.12-2.5-1.27-2.5h-1.8c-1.16 0-1.17 1.93-1.3 2.53" class="wm-shadow"/><path fill="#7e2443" d="m10.19 3.1l-.3 1.7c-.03.16-1.17.57-1.39.68l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.5 5.94c-.31.31-.23.84 0 1.17l.98 1.39c-.1.21-.56 1.37-.68 1.39l-1.7.3c-.32.06-.69.47-.69.81v2c0 .39.43.77.79.83l1.6.28c.16.03.57 1.17.68 1.39l-.99 1.4c-.24.35-.28.88.04 1.2l1.41 1.4c.31.31.84.23 1.17 0l1.39-.98c.21.1 1.37.56 1.39.68l.3 1.7c.06.32.47.69.81.69h2c.39 0 .77-.43.83-.79l.28-1.6c.03-.16 1.17-.57 1.39-.68l1.4.99c.35.24.88.28 1.2-.04l1.4-1.41c.31-.31.23-.84 0-1.17l-.98-1.39c.1-.21.56-1.37.68-1.39l1.7-.3c.32-.06.69-.47.69-.81v-2c0-.39-.43-.77-.79-.83l-1.6-.28c-.16-.03-.57-1.17-.68-1.39l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.31-.31-.84-.23-1.17 0l-1.39.98c-.21-.1-1.37-.56-1.39-.68l-.3-1.7c-.07-.39-.53-.7-.91-.7h-1.8c-.38 0-.84.31-.91.7" class="wm-k"/><path fill="#f8bccb" d="M11 3.07c-.13.19-.13-.04-.2.29c-.07.34-.05 1.83-.7 2.14l-.7.26c-.27.12-.84.54-1.2.28L6.7 5.01l-.2-.07l-.2.09L5 6.34c-.13.13 0 .36.07.46l.97 1.4c.26.36-.17.94-.28 1.2c-.21.51-.25 1.01-.86 1.12l-1.6.29c-.12.02-.25.16-.25.29v1.8c0 .47 1.37.49 1.85.58c.6.11.65.62.86 1.12c.12.27.54.84.28 1.2l-1.03 1.5l-.07.2l.09.2L6.34 19c.13.13.36 0 .46-.07l1.4-.97c.36-.26.94.17 1.2.28c.51.21 1.01.25 1.12.86l.29 1.6c.02.12.16.25.29.25h1.8c.47 0 .49-1.37.58-1.85c.11-.6.62-.65 1.12-.86c.27-.12.84-.54 1.2-.28l1.5 1.03l.2.07l.2-.09l1.3-1.31c.13-.13 0-.36-.07-.46l-.97-1.4c-.26-.36.17-.94.28-1.2c.21-.51.25-1.01.86-1.12l1.6-.29c.12-.02.25-.16.25-.29v-1.8c0-.47-1.37-.49-1.85-.58c-.6-.11-.65-.62-.86-1.12c-.12-.27-.54-.84-.28-1.2l1.03-1.5l.07-.2l-.09-.2L17.66 5c-.13-.13-.36 0-.46.07l-1.4.97c-.36.26-.94-.17-1.2-.28c-.51-.21-1.01-.25-1.12-.86l-.29-1.6l-.14-.2l-.25-.06c-.6-.01-1.2.02-1.8.03" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="M12.9 3.06c.21 1.38 0 1.04.5 1.78l.04-.14l-.25-1.4c-.07-.35-.13-.11-.29-.24m5.7 3.02l-1 1.45c-.3.44.07.87.24 1.27c.38.91.07.46.46.95c0-.05.03-.1.01-.15l-.43-1c-.16-.38.95-1.74 1.18-2.1c-.15-.19-.13-.24-.36-.47zm2 4.7c-.01.28.29 1.7-.35 1.82l-1.65.3c-.14.03-.38.16-.44.3l-.67 1.6c-.11.25.23.63.31.76l.44-.96c.21-.51.25-1.01.86-1.12l1.6-.29l.23-.19l.02-1.9c.01-.21-.22-.23-.35-.32M3.1 12.64l-.05.06l.02.3l.23.19c.23.05 1.36.23 1.86.31c-.39-.85-1.09-.7-2.06-.86m15.6 4.23l-.14.23l-1.19 1.2l-.27.16c-1.77-1.15-1.36-1.47-2.9-.82c-.38.16-1.01.24-1.1.76l-.28 1.6c-.02.14-.15.35-.32.35h-1.7c.01.16-.03.6.3.6h1.8c.17 0 .3-.21.32-.35l.26-1.5c.1-.59.63-.66 1.12-.86c.25-.11.84-.54 1.2-.28l1.5 1.03c.33.23.08.01.3.05l1.44-1.44c-.09-.34-.11-.4-.34-.73m-10.97.53l-1.33.93l-.3.12l-.2-.09l-.9-.89l-.04.13l1.44 1.44c.34-.09.06.13.4-.11L8.13 18c.48-.34 1.48.32 1.98.5c-.05-.18-.1-.45-.31-.54l-1.5-.65c-.18-.08-.42-.02-.57.09" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="M11.1 3.23c-.41 1.85-.07 2.01-1.7 2.69c-.53.22-1.23.62-1.8.23l-1.3-.9l-.95.95l.95 1.4c.14.22.14.66.04.9l-.73 1.7c-.3.7-1.98.74-2.28.8v1.2c1.84.41 2.01.18 2.68 1.8c.28.67.62 1.2.15 1.9l-.8 1.2l.84.84l.1.02L7.71 17c.49-.34 1.17.11 1.59.29c1.63.7 1.39.82 1.8 2.68h1.2c.41-1.84.18-2.01 1.8-2.68c.52-.22 1.13-.63 1.7-.24l1.3.9l.1-.01l.84-.84l.02-.1l-.96-1.41c-.34-.49.11-1.17.29-1.59c.7-1.63.82-1.39 2.68-1.8V11c-1.84-.41-2.01-.18-2.68-1.8c-.22-.52-.63-1.13-.24-1.7l.9-1.3l-.01-.1l-.84-.84l-1.4.95c-.51.34-1.28-.12-1.7-.3c-1.63-.7-1.39-.82-1.8-2.68z" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="m11.2 3.37l-.14.23l-.28 1.5c-.04.21-.27.53-.48.62l-1.5.64c-.28.13-.66.03-.9-.14l-1.2-.84l-.2-.06c-1.2 1.14-1.56.89-.69 1.88c.39-.37.8-.74 1.19-1.12l.25.12l1.25.87c.26.18.62.18.9.05l1.4-.6c.67-.29.76-1.97.83-2.32l.17-.06h1l.1-.04l.09-.2c0-.98-1.09-.54-1.79-.53m6.1 2l-1.3.9c-.62.43-1.42-.19-2-.41l-.1.05l-.08.19c.11.17.17.32.38.41l1.4.61c.28.12.64.13.9-.05L18.03 6l.05-.1c-.16-.18-.44-.77-.78-.53M6.5 8.69l-.14.11l-.59 1.4c-.14.32-.43.54-.77.6l-1.4.26l-.22.14c-.01.54.01 1.09.02 1.63c.37.13.17.03.4.07c.02-.27.04-.53.05-.8l.08-.2l1.57-.3c.69-.13.81-.74 1.05-1.3c.1-.23.32-.62.36-.9c.04-.31-.1-.45-.23-.7zm12.3 2.17l-.06.14c.25.38.43.47.86.62l.2-.13l.1-.39l-.1-.14l-.9-.15zM5.33 17.4l.03.2c.14.14.29.26.44.38l.21-.08c.46-.54 1.27-1.48.69-2.24l-.1-.05l-.2.12c-.36.55-.7 1.13-1.07 1.67" class="wm-shine"/><path fill="#7e2443" d="M11.2 8.08c-.78.16-1.49.55-2.05 1.12c-2.77 2.77-.16 7.5 3.65 6.72c.77-.16 1.5-.55 2.05-1.12c2.72-2.8.19-7.51-3.65-6.72" class="wm-k"/><path fill="#fceadd" d="M11.3 8.67c-3.25.7-3.65 5.18-.6 6.47c.62.26 1.34.33 2 .19c3.25-.7 3.65-5.18.6-6.47c-.62-.26-1.34-.33-2-.19" class="wm-k"/><path fill="#f8bccb" fill-opacity=".85" d="M14.9 10.23c.06.55.16 1.19.03 1.77c-.43 1.84-2.45 3.23-4.33 2.55c-.61-.22-1.04-.53-1.52-.95l-.02.1c.32.42.58.81 1.04 1.12c3.03 2.02 6.49-1.28 4.8-4.59" class="wm-k"/><path fill="#fffbf6" fill-opacity=".47" d="M11.1 8.88c-3.58.88-2.38 6.19 1.2 5.45c3.6-.74 2.34-6.32-1.2-5.45" class="wm-k"/><path fill="#fff" fill-opacity=".9" d="m9.1 13.01l.1.04l.1-.04c.22-.61.21-1.23.56-1.81c.93-1.54 2.61-1.77 4.14-1.11c.07-.07.14-.13.21-.19c-2.36-2.37-6.23-.02-5.11 3.11" class="wm-shine"/><path fill="#7e2443" d="m10.23 12.3l1.27 1.17l.37.43l.13.07l.13-.07l.37-.43l1.07-.97c.32-.3.76-.81.73-1.3c-.06-.95-1.17-1.45-1.9-.84c-.25.21-.26.33-.4.64l-.18-.4c-.83-1.41-3.14.26-1.59 1.7" class="wm-k"/><path fill="#d7385f" d="M10.47 11.2c.09.24.13.42.33.6l1.2 1.11l1.1-1.01c.34-.31.32-.36.44-.7l-.08-.2c-.18-.19-.47-.25-.63 0c-.26.38-.32.84-.93.75a.73.73 0 0 1-.47-.25c-.17-.2-.44-1.11-.89-.5z" class="wm-k"/><path fill="#7e2443" fill-opacity=".34" d="m13.4 10.94l-.5.66l-1.09 1l-.04.1l.23.21c.59-.53 1.25-.97 1.54-1.71z" class="wm-k"/></g>`;
</script>
cssCSS mask(随 currentColor 改色)
.settings {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23a8345c%22%20fill-opacity%3D%22.2%22%20d%3D%22m10.1%205.73l-1.3.55l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.8%206.74c-.74.74.73%202.21.98%202.56l-.58%201.33c-.39.08-2.49.12-2.49%201.17v2c0%201.01%202.18%201.13%202.52%201.2l.55%201.3l-.99%201.4c-.24.35-.28.88.04%201.2l1.41%201.4c.74.74%202.21-.73%202.56-.98l1.33.58c.08.39.12%202.49%201.17%202.49h2c1.01%200%201.13-2.18%201.2-2.52l1.3-.55l1.4.99c.35.24.88.28%201.2-.04l1.4-1.41c.74-.74-.73-2.21-.98-2.56l.58-1.33c.39-.08%202.49-.12%202.49-1.17v-2c0-1.01-2.18-1.13-2.52-1.2l-.55-1.3l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.74-.74-2.21.73-2.56.98l-1.33-.58c-.13-.61-.12-2.5-1.27-2.5h-1.8c-1.16%200-1.17%201.93-1.3%202.53%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m10.19%203.1l-.3%201.7c-.03.16-1.17.57-1.39.68l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.5%205.94c-.31.31-.23.84%200%201.17l.98%201.39c-.1.21-.56%201.37-.68%201.39l-1.7.3c-.32.06-.69.47-.69.81v2c0%20.39.43.77.79.83l1.6.28c.16.03.57%201.17.68%201.39l-.99%201.4c-.24.35-.28.88.04%201.2l1.41%201.4c.31.31.84.23%201.17%200l1.39-.98c.21.1%201.37.56%201.39.68l.3%201.7c.06.32.47.69.81.69h2c.39%200%20.77-.43.83-.79l.28-1.6c.03-.16%201.17-.57%201.39-.68l1.4.99c.35.24.88.28%201.2-.04l1.4-1.41c.31-.31.23-.84%200-1.17l-.98-1.39c.1-.21.56-1.37.68-1.39l1.7-.3c.32-.06.69-.47.69-.81v-2c0-.39-.43-.77-.79-.83l-1.6-.28c-.16-.03-.57-1.17-.68-1.39l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.31-.31-.84-.23-1.17%200l-1.39.98c-.21-.1-1.37-.56-1.39-.68l-.3-1.7c-.07-.39-.53-.7-.91-.7h-1.8c-.38%200-.84.31-.91.7%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20d%3D%22M11%203.07c-.13.19-.13-.04-.2.29c-.07.34-.05%201.83-.7%202.14l-.7.26c-.27.12-.84.54-1.2.28L6.7%205.01l-.2-.07l-.2.09L5%206.34c-.13.13%200%20.36.07.46l.97%201.4c.26.36-.17.94-.28%201.2c-.21.51-.25%201.01-.86%201.12l-1.6.29c-.12.02-.25.16-.25.29v1.8c0%20.47%201.37.49%201.85.58c.6.11.65.62.86%201.12c.12.27.54.84.28%201.2l-1.03%201.5l-.07.2l.09.2L6.34%2019c.13.13.36%200%20.46-.07l1.4-.97c.36-.26.94.17%201.2.28c.51.21%201.01.25%201.12.86l.29%201.6c.02.12.16.25.29.25h1.8c.47%200%20.49-1.37.58-1.85c.11-.6.62-.65%201.12-.86c.27-.12.84-.54%201.2-.28l1.5%201.03l.2.07l.2-.09l1.3-1.31c.13-.13%200-.36-.07-.46l-.97-1.4c-.26-.36.17-.94.28-1.2c.21-.51.25-1.01.86-1.12l1.6-.29c.12-.02.25-.16.25-.29v-1.8c0-.47-1.37-.49-1.85-.58c-.6-.11-.65-.62-.86-1.12c-.12-.27-.54-.84-.28-1.2l1.03-1.5l.07-.2l-.09-.2L17.66%205c-.13-.13-.36%200-.46.07l-1.4.97c-.36.26-.94-.17-1.2-.28c-.51-.21-1.01-.25-1.12-.86l-.29-1.6l-.14-.2l-.25-.06c-.6-.01-1.2.02-1.8.03%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.62%22%20d%3D%22M12.9%203.06c.21%201.38%200%201.04.5%201.78l.04-.14l-.25-1.4c-.07-.35-.13-.11-.29-.24m5.7%203.02l-1%201.45c-.3.44.07.87.24%201.27c.38.91.07.46.46.95c0-.05.03-.1.01-.15l-.43-1c-.16-.38.95-1.74%201.18-2.1c-.15-.19-.13-.24-.36-.47zm2%204.7c-.01.28.29%201.7-.35%201.82l-1.65.3c-.14.03-.38.16-.44.3l-.67%201.6c-.11.25.23.63.31.76l.44-.96c.21-.51.25-1.01.86-1.12l1.6-.29l.23-.19l.02-1.9c.01-.21-.22-.23-.35-.32M3.1%2012.64l-.05.06l.02.3l.23.19c.23.05%201.36.23%201.86.31c-.39-.85-1.09-.7-2.06-.86m15.6%204.23l-.14.23l-1.19%201.2l-.27.16c-1.77-1.15-1.36-1.47-2.9-.82c-.38.16-1.01.24-1.1.76l-.28%201.6c-.02.14-.15.35-.32.35h-1.7c.01.16-.03.6.3.6h1.8c.17%200%20.3-.21.32-.35l.26-1.5c.1-.59.63-.66%201.12-.86c.25-.11.84-.54%201.2-.28l1.5%201.03c.33.23.08.01.3.05l1.44-1.44c-.09-.34-.11-.4-.34-.73m-10.97.53l-1.33.93l-.3.12l-.2-.09l-.9-.89l-.04.13l1.44%201.44c.34-.09.06.13.4-.11L8.13%2018c.48-.34%201.48.32%201.98.5c-.05-.18-.1-.45-.31-.54l-1.5-.65c-.18-.08-.42-.02-.57.09%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.41%22%20d%3D%22M11.1%203.23c-.41%201.85-.07%202.01-1.7%202.69c-.53.22-1.23.62-1.8.23l-1.3-.9l-.95.95l.95%201.4c.14.22.14.66.04.9l-.73%201.7c-.3.7-1.98.74-2.28.8v1.2c1.84.41%202.01.18%202.68%201.8c.28.67.62%201.2.15%201.9l-.8%201.2l.84.84l.1.02L7.71%2017c.49-.34%201.17.11%201.59.29c1.63.7%201.39.82%201.8%202.68h1.2c.41-1.84.18-2.01%201.8-2.68c.52-.22%201.13-.63%201.7-.24l1.3.9l.1-.01l.84-.84l.02-.1l-.96-1.41c-.34-.49.11-1.17.29-1.59c.7-1.63.82-1.39%202.68-1.8V11c-1.84-.41-2.01-.18-2.68-1.8c-.22-.52-.63-1.13-.24-1.7l.9-1.3l-.01-.1l-.84-.84l-1.4.95c-.51.34-1.28-.12-1.7-.3c-1.63-.7-1.39-.82-1.8-2.68z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.95%22%20d%3D%22m11.2%203.37l-.14.23l-.28%201.5c-.04.21-.27.53-.48.62l-1.5.64c-.28.13-.66.03-.9-.14l-1.2-.84l-.2-.06c-1.2%201.14-1.56.89-.69%201.88c.39-.37.8-.74%201.19-1.12l.25.12l1.25.87c.26.18.62.18.9.05l1.4-.6c.67-.29.76-1.97.83-2.32l.17-.06h1l.1-.04l.09-.2c0-.98-1.09-.54-1.79-.53m6.1%202l-1.3.9c-.62.43-1.42-.19-2-.41l-.1.05l-.08.19c.11.17.17.32.38.41l1.4.61c.28.12.64.13.9-.05L18.03%206l.05-.1c-.16-.18-.44-.77-.78-.53M6.5%208.69l-.14.11l-.59%201.4c-.14.32-.43.54-.77.6l-1.4.26l-.22.14c-.01.54.01%201.09.02%201.63c.37.13.17.03.4.07c.02-.27.04-.53.05-.8l.08-.2l1.57-.3c.69-.13.81-.74%201.05-1.3c.1-.23.32-.62.36-.9c.04-.31-.1-.45-.23-.7zm12.3%202.17l-.06.14c.25.38.43.47.86.62l.2-.13l.1-.39l-.1-.14l-.9-.15zM5.33%2017.4l.03.2c.14.14.29.26.44.38l.21-.08c.46-.54%201.27-1.48.69-2.24l-.1-.05l-.2.12c-.36.55-.7%201.13-1.07%201.67%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M11.2%208.08c-.78.16-1.49.55-2.05%201.12c-2.77%202.77-.16%207.5%203.65%206.72c.77-.16%201.5-.55%202.05-1.12c2.72-2.8.19-7.51-3.65-6.72%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fceadd%22%20d%3D%22M11.3%208.67c-3.25.7-3.65%205.18-.6%206.47c.62.26%201.34.33%202%20.19c3.25-.7%203.65-5.18.6-6.47c-.62-.26-1.34-.33-2-.19%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20fill-opacity%3D%22.85%22%20d%3D%22M14.9%2010.23c.06.55.16%201.19.03%201.77c-.43%201.84-2.45%203.23-4.33%202.55c-.61-.22-1.04-.53-1.52-.95l-.02.1c.32.42.58.81%201.04%201.12c3.03%202.02%206.49-1.28%204.8-4.59%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fffbf6%22%20fill-opacity%3D%22.47%22%20d%3D%22M11.1%208.88c-3.58.88-2.38%206.19%201.2%205.45c3.6-.74%202.34-6.32-1.2-5.45%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.9%22%20d%3D%22m9.1%2013.01l.1.04l.1-.04c.22-.61.21-1.23.56-1.81c.93-1.54%202.61-1.77%204.14-1.11c.07-.07.14-.13.21-.19c-2.36-2.37-6.23-.02-5.11%203.11%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m10.23%2012.3l1.27%201.17l.37.43l.13.07l.13-.07l.37-.43l1.07-.97c.32-.3.76-.81.73-1.3c-.06-.95-1.17-1.45-1.9-.84c-.25.21-.26.33-.4.64l-.18-.4c-.83-1.41-3.14.26-1.59%201.7%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22M10.47%2011.2c.09.24.13.42.33.6l1.2%201.11l1.1-1.01c.34-.31.32-.36.44-.7l-.08-.2c-.18-.19-.47-.25-.63%200c-.26.38-.32.84-.93.75a.73.73%200%200%201-.47-.25c-.17-.2-.44-1.11-.89-.5z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22m13.4%2010.94l-.5.66l-1.09%201l-.04.1l.23.21c.59-.53%201.25-.97%201.54-1.71z%22%20class%3D%22wm-k%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23a8345c%22%20fill-opacity%3D%22.2%22%20d%3D%22m10.1%205.73l-1.3.55l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.8%206.74c-.74.74.73%202.21.98%202.56l-.58%201.33c-.39.08-2.49.12-2.49%201.17v2c0%201.01%202.18%201.13%202.52%201.2l.55%201.3l-.99%201.4c-.24.35-.28.88.04%201.2l1.41%201.4c.74.74%202.21-.73%202.56-.98l1.33.58c.08.39.12%202.49%201.17%202.49h2c1.01%200%201.13-2.18%201.2-2.52l1.3-.55l1.4.99c.35.24.88.28%201.2-.04l1.4-1.41c.74-.74-.73-2.21-.98-2.56l.58-1.33c.39-.08%202.49-.12%202.49-1.17v-2c0-1.01-2.18-1.13-2.52-1.2l-.55-1.3l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.74-.74-2.21.73-2.56.98l-1.33-.58c-.13-.61-.12-2.5-1.27-2.5h-1.8c-1.16%200-1.17%201.93-1.3%202.53%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m10.19%203.1l-.3%201.7c-.03.16-1.17.57-1.39.68l-1.4-.99c-.35-.24-.88-.28-1.2.04L4.5%205.94c-.31.31-.23.84%200%201.17l.98%201.39c-.1.21-.56%201.37-.68%201.39l-1.7.3c-.32.06-.69.47-.69.81v2c0%20.39.43.77.79.83l1.6.28c.16.03.57%201.17.68%201.39l-.99%201.4c-.24.35-.28.88.04%201.2l1.41%201.4c.31.31.84.23%201.17%200l1.39-.98c.21.1%201.37.56%201.39.68l.3%201.7c.06.32.47.69.81.69h2c.39%200%20.77-.43.83-.79l.28-1.6c.03-.16%201.17-.57%201.39-.68l1.4.99c.35.24.88.28%201.2-.04l1.4-1.41c.31-.31.23-.84%200-1.17l-.98-1.39c.1-.21.56-1.37.68-1.39l1.7-.3c.32-.06.69-.47.69-.81v-2c0-.39-.43-.77-.79-.83l-1.6-.28c-.16-.03-.57-1.17-.68-1.39l.99-1.4c.24-.35.28-.88-.04-1.2l-1.41-1.4c-.31-.31-.84-.23-1.17%200l-1.39.98c-.21-.1-1.37-.56-1.39-.68l-.3-1.7c-.07-.39-.53-.7-.91-.7h-1.8c-.38%200-.84.31-.91.7%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20d%3D%22M11%203.07c-.13.19-.13-.04-.2.29c-.07.34-.05%201.83-.7%202.14l-.7.26c-.27.12-.84.54-1.2.28L6.7%205.01l-.2-.07l-.2.09L5%206.34c-.13.13%200%20.36.07.46l.97%201.4c.26.36-.17.94-.28%201.2c-.21.51-.25%201.01-.86%201.12l-1.6.29c-.12.02-.25.16-.25.29v1.8c0%20.47%201.37.49%201.85.58c.6.11.65.62.86%201.12c.12.27.54.84.28%201.2l-1.03%201.5l-.07.2l.09.2L6.34%2019c.13.13.36%200%20.46-.07l1.4-.97c.36-.26.94.17%201.2.28c.51.21%201.01.25%201.12.86l.29%201.6c.02.12.16.25.29.25h1.8c.47%200%20.49-1.37.58-1.85c.11-.6.62-.65%201.12-.86c.27-.12.84-.54%201.2-.28l1.5%201.03l.2.07l.2-.09l1.3-1.31c.13-.13%200-.36-.07-.46l-.97-1.4c-.26-.36.17-.94.28-1.2c.21-.51.25-1.01.86-1.12l1.6-.29c.12-.02.25-.16.25-.29v-1.8c0-.47-1.37-.49-1.85-.58c-.6-.11-.65-.62-.86-1.12c-.12-.27-.54-.84-.28-1.2l1.03-1.5l.07-.2l-.09-.2L17.66%205c-.13-.13-.36%200-.46.07l-1.4.97c-.36.26-.94-.17-1.2-.28c-.51-.21-1.01-.25-1.12-.86l-.29-1.6l-.14-.2l-.25-.06c-.6-.01-1.2.02-1.8.03%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.62%22%20d%3D%22M12.9%203.06c.21%201.38%200%201.04.5%201.78l.04-.14l-.25-1.4c-.07-.35-.13-.11-.29-.24m5.7%203.02l-1%201.45c-.3.44.07.87.24%201.27c.38.91.07.46.46.95c0-.05.03-.1.01-.15l-.43-1c-.16-.38.95-1.74%201.18-2.1c-.15-.19-.13-.24-.36-.47zm2%204.7c-.01.28.29%201.7-.35%201.82l-1.65.3c-.14.03-.38.16-.44.3l-.67%201.6c-.11.25.23.63.31.76l.44-.96c.21-.51.25-1.01.86-1.12l1.6-.29l.23-.19l.02-1.9c.01-.21-.22-.23-.35-.32M3.1%2012.64l-.05.06l.02.3l.23.19c.23.05%201.36.23%201.86.31c-.39-.85-1.09-.7-2.06-.86m15.6%204.23l-.14.23l-1.19%201.2l-.27.16c-1.77-1.15-1.36-1.47-2.9-.82c-.38.16-1.01.24-1.1.76l-.28%201.6c-.02.14-.15.35-.32.35h-1.7c.01.16-.03.6.3.6h1.8c.17%200%20.3-.21.32-.35l.26-1.5c.1-.59.63-.66%201.12-.86c.25-.11.84-.54%201.2-.28l1.5%201.03c.33.23.08.01.3.05l1.44-1.44c-.09-.34-.11-.4-.34-.73m-10.97.53l-1.33.93l-.3.12l-.2-.09l-.9-.89l-.04.13l1.44%201.44c.34-.09.06.13.4-.11L8.13%2018c.48-.34%201.48.32%201.98.5c-.05-.18-.1-.45-.31-.54l-1.5-.65c-.18-.08-.42-.02-.57.09%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.41%22%20d%3D%22M11.1%203.23c-.41%201.85-.07%202.01-1.7%202.69c-.53.22-1.23.62-1.8.23l-1.3-.9l-.95.95l.95%201.4c.14.22.14.66.04.9l-.73%201.7c-.3.7-1.98.74-2.28.8v1.2c1.84.41%202.01.18%202.68%201.8c.28.67.62%201.2.15%201.9l-.8%201.2l.84.84l.1.02L7.71%2017c.49-.34%201.17.11%201.59.29c1.63.7%201.39.82%201.8%202.68h1.2c.41-1.84.18-2.01%201.8-2.68c.52-.22%201.13-.63%201.7-.24l1.3.9l.1-.01l.84-.84l.02-.1l-.96-1.41c-.34-.49.11-1.17.29-1.59c.7-1.63.82-1.39%202.68-1.8V11c-1.84-.41-2.01-.18-2.68-1.8c-.22-.52-.63-1.13-.24-1.7l.9-1.3l-.01-.1l-.84-.84l-1.4.95c-.51.34-1.28-.12-1.7-.3c-1.63-.7-1.39-.82-1.8-2.68z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.95%22%20d%3D%22m11.2%203.37l-.14.23l-.28%201.5c-.04.21-.27.53-.48.62l-1.5.64c-.28.13-.66.03-.9-.14l-1.2-.84l-.2-.06c-1.2%201.14-1.56.89-.69%201.88c.39-.37.8-.74%201.19-1.12l.25.12l1.25.87c.26.18.62.18.9.05l1.4-.6c.67-.29.76-1.97.83-2.32l.17-.06h1l.1-.04l.09-.2c0-.98-1.09-.54-1.79-.53m6.1%202l-1.3.9c-.62.43-1.42-.19-2-.41l-.1.05l-.08.19c.11.17.17.32.38.41l1.4.61c.28.12.64.13.9-.05L18.03%206l.05-.1c-.16-.18-.44-.77-.78-.53M6.5%208.69l-.14.11l-.59%201.4c-.14.32-.43.54-.77.6l-1.4.26l-.22.14c-.01.54.01%201.09.02%201.63c.37.13.17.03.4.07c.02-.27.04-.53.05-.8l.08-.2l1.57-.3c.69-.13.81-.74%201.05-1.3c.1-.23.32-.62.36-.9c.04-.31-.1-.45-.23-.7zm12.3%202.17l-.06.14c.25.38.43.47.86.62l.2-.13l.1-.39l-.1-.14l-.9-.15zM5.33%2017.4l.03.2c.14.14.29.26.44.38l.21-.08c.46-.54%201.27-1.48.69-2.24l-.1-.05l-.2.12c-.36.55-.7%201.13-1.07%201.67%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M11.2%208.08c-.78.16-1.49.55-2.05%201.12c-2.77%202.77-.16%207.5%203.65%206.72c.77-.16%201.5-.55%202.05-1.12c2.72-2.8.19-7.51-3.65-6.72%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fceadd%22%20d%3D%22M11.3%208.67c-3.25.7-3.65%205.18-.6%206.47c.62.26%201.34.33%202%20.19c3.25-.7%203.65-5.18.6-6.47c-.62-.26-1.34-.33-2-.19%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20fill-opacity%3D%22.85%22%20d%3D%22M14.9%2010.23c.06.55.16%201.19.03%201.77c-.43%201.84-2.45%203.23-4.33%202.55c-.61-.22-1.04-.53-1.52-.95l-.02.1c.32.42.58.81%201.04%201.12c3.03%202.02%206.49-1.28%204.8-4.59%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fffbf6%22%20fill-opacity%3D%22.47%22%20d%3D%22M11.1%208.88c-3.58.88-2.38%206.19%201.2%205.45c3.6-.74%202.34-6.32-1.2-5.45%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.9%22%20d%3D%22m9.1%2013.01l.1.04l.1-.04c.22-.61.21-1.23.56-1.81c.93-1.54%202.61-1.77%204.14-1.11c.07-.07.14-.13.21-.19c-2.36-2.37-6.23-.02-5.11%203.11%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m10.23%2012.3l1.27%201.17l.37.43l.13.07l.13-.07l.37-.43l1.07-.97c.32-.3.76-.81.73-1.3c-.06-.95-1.17-1.45-1.9-.84c-.25.21-.26.33-.4.64l-.18-.4c-.83-1.41-3.14.26-1.59%201.7%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22M10.47%2011.2c.09.24.13.42.33.6l1.2%201.11l1.1-1.01c.34-.31.32-.36.44-.7l-.08-.2c-.18-.19-.47-.25-.63%200c-.26.38-.32.84-.93.75a.73.73%200%200%201-.47-.25c-.17-.2-.44-1.11-.89-.5z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22m13.4%2010.94l-.5.66l-1.09%201l-.04.1l.23.21c.59-.53%201.25-.97%201.54-1.71z%22%20class%3D%22wm-k%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 设置 加一点动效

单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。

settings 呼吸动效演示

呼吸

透明度往复渐变,适合状态提示与在线指示。

css呼吸动效样式
.icon-settings {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
settings 旋转动效演示

旋转

匀速循环旋转,适合加载中场景。

css旋转动效样式
.icon-settings {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标,供工程侧评估引用方式。

文件体积

6.04 KB

6,185 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

14

<path> ×14

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 6.04 KB(6,185 字节),图元 14 个,风格为多色填充。

常见问题

关于 设置 图标的下载、商用与改色。

设置 图标是什么?▾

它是 with icons Coquette(withicons-coquette)开源图标集中的 settings 图标,多色填充,viewBox 为 0 0 24 24,文件仅 6.04 KB,矢量格式可无损缩放到任意尺寸。

如何下载 设置 图标?▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。

设置 图标可以商用吗?▾

该图标采用 MIT(MIT) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 设置 图标的颜色?▾

在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

with icons Coquette 中的相近图标

settings-2