activity SVG 图标
withicons-liquidactivity
来自 with icons Liquid 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
- 图标 ID
- withicons-liquid:activity
- 中文名
- —
- 集合规模
- 1,000 枚
- 基础网格
- 24px
- 色彩
- 多色
- 开源协议
- MIT
- 作者
- Evergrow
withicons-liquidactivity
来自 with icons Liquid 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。
PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。
切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><defs><linearGradient id="SVG4yKthwRD" x1="2.2" x2="21.4" y1="3.7" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4a9dff" stop-opacity=".14"/><stop offset=".6" stop-color="#4a9dff" stop-opacity=".36"/><stop offset="1" stop-color="#4a9dff" stop-opacity=".62"/></linearGradient><linearGradient id="SVGIheFfdSP" x1="2.2" x2="21.4" y1="3.7" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c3f9e" stop-opacity=".36"/><stop offset="1" stop-color="#1c3f9e" stop-opacity=".95"/></linearGradient><linearGradient id="SVGkQjiNcDo" x1="6.04" x2="21.4" y1="6.82" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".15"/></linearGradient><linearGradient id="SVGvVhSdd6k" x1="2.2" x2="7.96" y1="9.94" y2="20.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c1a3a" stop-opacity=".1"/><stop offset="1" stop-color="#ff7ec1" stop-opacity=".32"/></linearGradient><radialGradient id="SVGfcP85b9I" cx="8.73" cy="8.38" r="9.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".8"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><path fill="url(#SVGvVhSdd6k)" d="M8.7 5.1L6.5 9.6l-1.2 1.5H3.5c-1.4.1-1.6 2-.7 2.7c.9.6 2.5.3 3.4.3c.4 0 1.5 0 1.7-.5L9.3 11l1.2 1.6L13 20c.4.9 2.1.9 2.5.1l2.2-4.5l1.2-1.5h1.8c1.4-.1 1.6-2 .7-2.7c-.9-.6-2.5-.3-3.4-.3c-.4 0-1.5 0-1.7.5L15 14.2l-1.3-1.6l-2.5-7.4c-.4-.9-2.1-.9-2.5-.1" class="wm-shadow"/><path fill="url(#SVG4yKthwRD)" stroke="#000" stroke-opacity=".3" stroke-width=".22" d="m6.36 8.71l-1.28 1.48c-.75.01-1.97-.2-2.57.42c-.63.65-.34 2.11.69 2.15l1 .03l1.7-.01l.98-.04c.23-.02.6-.3.7-.51l.51-1.02l1.73.68l2.16 4.22l.94 2.69c.26.73 1.78.76 2.1.08l2.22-4.59l1.29-1.48c.52-.01 1.62.11 2.17-.14c.97-.44.98-1.89 0-2.33c-.6-.26-2.44-.15-2.92-.13l-.98.04c-.26.01-.66.28-.78.52l-.51 1.02l-1.73-.68l-2.16-4.22l-.94-2.69c-.25-.73-1.72-.76-2.07-.11z"/><path stroke="url(#SVGIheFfdSP)" stroke-linejoin="round" stroke-width=".5" d="m5.78 10.4l-2.58.09c-.86.03-1 1.35-.42 1.8l.24.15l1.03.08l1.78.02l.97-.04c.57-.02.95-1.18 1.04-1.37l1.45-2.92c.08 0 .15 0 .23.01l.09.08l2.61 7.72c.32.96.35 2.12 1.07 2.83c.35.36 1.24.43 1.51-.09l.78-1.6c1.94-4.01.81-1.8 2.25-4.56l2.57-.09c.86-.03 1-1.35.42-1.8l-.24-.15l-1.03-.08l-1.78-.02l-.97.04c-.57.02-.95 1.18-1.04 1.38l-1.45 2.91c-.08 0-.15 0-.23-.01l-.09-.08l-2.61-7.72c-.32-.96-.35-2.12-1.07-2.83c-.35-.36-1.24-.43-1.51.09l-.78 1.6c-1.94 4.01-.81 1.8-2.24 4.56z"/><path fill="url(#SVGfcP85b9I)" d="m9 4.3l-3 6.2l-.2.2H3.2c-.5.1-.5.6-.5.9c.1.2.2.3.4.4c.6 0 3.6.3 3.8-.1l.5-1.1L8.8 8l.4-.3c.2 0 .5 0 .6.2l.9 2.7l2.6 7.7c.1.4.9.5 1.1.2l3-6.2l.2-.2h2.6c.5-.1.5-.6.5-.9c-.1-.2-.2-.3-.4-.4c-.6 0-3.6-.3-3.8.1L16 12l-1.4 2.8l-.4.3c-.2 0-.5 0-.6-.2l-.9-2.7L10 4.4l-.3-.2c-.2 0-.5-.1-.7.1" class="wm-shine"/><path fill="#ff7ec1" fill-opacity=".6" d="m10.43 4.1l-.04.01l2.55 7.68l.88 2.56l.11.03l-2.45-7.5l-.93-2.64zM9.02 8.05l-1.36 2.82c-.08.17-.5 1.38-1.06 1.42l-1 .07l-1.7.01l-1.23-.07l-.03.04c.58.37.78.33 1.59.34l1.67-.02l1-.07c.69-.05 1.87-3.11 1.96-3.31l.41-1l-.09-.23zm12 2.66c-.01 1.25-.29 1.63-1.62 1.66l-1.81.04l-2.17 4.48c-.61 1.28-.71 2.3-2.21 2c.04.03.03.1.07.13c1.38 1.03 2.03-.97 2.44-1.83l1.42-2.98l.75-1.5l1.81-.04c.67-.02 1.32-.08 1.56-.79c.15-.46.01-.8-.24-1.17"/><path fill="#b9e6ff" fill-opacity=".85" d="m10.22 4.29l-.05.02l2.53 7.63l.9 2.59l.09.08l.05-.03l-2.49-7.55l-.92-2.62zM8.8 7.87l-1.9 3.9c-.21.42-1.11.32-1.35.32c-.82.01-1.9 0-2.74.03c.15.1.29.25.49.26l.93.02l2.5-.03c.54-.01.93-1.21 1-1.35l1.46-2.93l.22-.11v-.09l-.21-.16c-.14.02-.31-.04-.4.14m12.01 3.04l-.06.03c0 .4-.12 1.11-.67 1.12l-2.55.07l-.23.14l-2.9 6.08c-.16.34-.73.33-1.03.35c.37.26 1.09.49 1.37-.1l2.86-6.03l.23-.14l2.56-.07c.52-.02.73-.77.6-1.16z" class="wm-shine"/><path fill="url(#SVGkQjiNcDo)" d="m6.36 8.71l-1.28 1.48l-1.95.06c-.61.08-1.03.81-.97 1.38c.03.29.16.44.3.67l.05-.05c-.22-2.03 1.26-1.73 2.87-1.76l1.27-1.46l2.21-4.59c.27-.54 1-.54 1.5-.48l.03-.06c-1.52-1.01-2.03.65-2.59 1.81zm4.17 2.6l-.9-2.43l.77 2.5l1.62 4.87l.88 2.53l.1.11l-.78-2.53zm7.27-1.09l-1.07.06c-.65.04-1 1.06-1.18 1.44l-.82 1.76l-.35 1.01c.89-1.13.46-.5 1.43-2.4c.2-.38.54-1.47 1.21-1.51l1.03-.07c.78-.05 2.11-.1 2.95.09l.02-.04c-.53-.38-.66-.33-1.47-.34z" class="wm-shine"/></g></svg>export function ActivityIcon(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"><defs><linearGradient id="SVG4yKthwRD" x1="2.2" x2="21.4" y1="3.7" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4a9dff" stop-opacity=".14"/><stop offset=".6" stop-color="#4a9dff" stop-opacity=".36"/><stop offset="1" stop-color="#4a9dff" stop-opacity=".62"/></linearGradient><linearGradient id="SVGIheFfdSP" x1="2.2" x2="21.4" y1="3.7" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c3f9e" stop-opacity=".36"/><stop offset="1" stop-color="#1c3f9e" stop-opacity=".95"/></linearGradient><linearGradient id="SVGkQjiNcDo" x1="6.04" x2="21.4" y1="6.82" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".15"/></linearGradient><linearGradient id="SVGvVhSdd6k" x1="2.2" x2="7.96" y1="9.94" y2="20.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c1a3a" stop-opacity=".1"/><stop offset="1" stop-color="#ff7ec1" stop-opacity=".32"/></linearGradient><radialGradient id="SVGfcP85b9I" cx="8.73" cy="8.38" r="9.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".8"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><path fill="url(#SVGvVhSdd6k)" d="M8.7 5.1L6.5 9.6l-1.2 1.5H3.5c-1.4.1-1.6 2-.7 2.7c.9.6 2.5.3 3.4.3c.4 0 1.5 0 1.7-.5L9.3 11l1.2 1.6L13 20c.4.9 2.1.9 2.5.1l2.2-4.5l1.2-1.5h1.8c1.4-.1 1.6-2 .7-2.7c-.9-.6-2.5-.3-3.4-.3c-.4 0-1.5 0-1.7.5L15 14.2l-1.3-1.6l-2.5-7.4c-.4-.9-2.1-.9-2.5-.1" class="wm-shadow"/><path fill="url(#SVG4yKthwRD)" stroke="#000" stroke-opacity=".3" stroke-width=".22" d="m6.36 8.71l-1.28 1.48c-.75.01-1.97-.2-2.57.42c-.63.65-.34 2.11.69 2.15l1 .03l1.7-.01l.98-.04c.23-.02.6-.3.7-.51l.51-1.02l1.73.68l2.16 4.22l.94 2.69c.26.73 1.78.76 2.1.08l2.22-4.59l1.29-1.48c.52-.01 1.62.11 2.17-.14c.97-.44.98-1.89 0-2.33c-.6-.26-2.44-.15-2.92-.13l-.98.04c-.26.01-.66.28-.78.52l-.51 1.02l-1.73-.68l-2.16-4.22l-.94-2.69c-.25-.73-1.72-.76-2.07-.11z"/><path stroke="url(#SVGIheFfdSP)" stroke-linejoin="round" stroke-width=".5" d="m5.78 10.4l-2.58.09c-.86.03-1 1.35-.42 1.8l.24.15l1.03.08l1.78.02l.97-.04c.57-.02.95-1.18 1.04-1.37l1.45-2.92c.08 0 .15 0 .23.01l.09.08l2.61 7.72c.32.96.35 2.12 1.07 2.83c.35.36 1.24.43 1.51-.09l.78-1.6c1.94-4.01.81-1.8 2.25-4.56l2.57-.09c.86-.03 1-1.35.42-1.8l-.24-.15l-1.03-.08l-1.78-.02l-.97.04c-.57.02-.95 1.18-1.04 1.38l-1.45 2.91c-.08 0-.15 0-.23-.01l-.09-.08l-2.61-7.72c-.32-.96-.35-2.12-1.07-2.83c-.35-.36-1.24-.43-1.51.09l-.78 1.6c-1.94 4.01-.81 1.8-2.24 4.56z"/><path fill="url(#SVGfcP85b9I)" d="m9 4.3l-3 6.2l-.2.2H3.2c-.5.1-.5.6-.5.9c.1.2.2.3.4.4c.6 0 3.6.3 3.8-.1l.5-1.1L8.8 8l.4-.3c.2 0 .5 0 .6.2l.9 2.7l2.6 7.7c.1.4.9.5 1.1.2l3-6.2l.2-.2h2.6c.5-.1.5-.6.5-.9c-.1-.2-.2-.3-.4-.4c-.6 0-3.6-.3-3.8.1L16 12l-1.4 2.8l-.4.3c-.2 0-.5 0-.6-.2l-.9-2.7L10 4.4l-.3-.2c-.2 0-.5-.1-.7.1" class="wm-shine"/><path fill="#ff7ec1" fill-opacity=".6" d="m10.43 4.1l-.04.01l2.55 7.68l.88 2.56l.11.03l-2.45-7.5l-.93-2.64zM9.02 8.05l-1.36 2.82c-.08.17-.5 1.38-1.06 1.42l-1 .07l-1.7.01l-1.23-.07l-.03.04c.58.37.78.33 1.59.34l1.67-.02l1-.07c.69-.05 1.87-3.11 1.96-3.31l.41-1l-.09-.23zm12 2.66c-.01 1.25-.29 1.63-1.62 1.66l-1.81.04l-2.17 4.48c-.61 1.28-.71 2.3-2.21 2c.04.03.03.1.07.13c1.38 1.03 2.03-.97 2.44-1.83l1.42-2.98l.75-1.5l1.81-.04c.67-.02 1.32-.08 1.56-.79c.15-.46.01-.8-.24-1.17"/><path fill="#b9e6ff" fill-opacity=".85" d="m10.22 4.29l-.05.02l2.53 7.63l.9 2.59l.09.08l.05-.03l-2.49-7.55l-.92-2.62zM8.8 7.87l-1.9 3.9c-.21.42-1.11.32-1.35.32c-.82.01-1.9 0-2.74.03c.15.1.29.25.49.26l.93.02l2.5-.03c.54-.01.93-1.21 1-1.35l1.46-2.93l.22-.11v-.09l-.21-.16c-.14.02-.31-.04-.4.14m12.01 3.04l-.06.03c0 .4-.12 1.11-.67 1.12l-2.55.07l-.23.14l-2.9 6.08c-.16.34-.73.33-1.03.35c.37.26 1.09.49 1.37-.1l2.86-6.03l.23-.14l2.56-.07c.52-.02.73-.77.6-1.16z" class="wm-shine"/><path fill="url(#SVGkQjiNcDo)" d="m6.36 8.71l-1.28 1.48l-1.95.06c-.61.08-1.03.81-.97 1.38c.03.29.16.44.3.67l.05-.05c-.22-2.03 1.26-1.73 2.87-1.76l1.27-1.46l2.21-4.59c.27-.54 1-.54 1.5-.48l.03-.06c-1.52-1.01-2.03.65-2.59 1.81zm4.17 2.6l-.9-2.43l.77 2.5l1.62 4.87l.88 2.53l.1.11l-.78-2.53zm7.27-1.09l-1.07.06c-.65.04-1 1.06-1.18 1.44l-.82 1.76l-.35 1.01c.89-1.13.46-.5 1.43-2.4c.2-.38.54-1.47 1.21-1.51l1.03-.07c.78-.05 2.11-.1 2.95.09l.02-.04c-.53-.38-.66-.33-1.47-.34z" class="wm-shine"/></g>` }}
/>
);
}<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"><defs><linearGradient id="SVG4yKthwRD" x1="2.2" x2="21.4" y1="3.7" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4a9dff" stop-opacity=".14"/><stop offset=".6" stop-color="#4a9dff" stop-opacity=".36"/><stop offset="1" stop-color="#4a9dff" stop-opacity=".62"/></linearGradient><linearGradient id="SVGIheFfdSP" x1="2.2" x2="21.4" y1="3.7" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c3f9e" stop-opacity=".36"/><stop offset="1" stop-color="#1c3f9e" stop-opacity=".95"/></linearGradient><linearGradient id="SVGkQjiNcDo" x1="6.04" x2="21.4" y1="6.82" y2="19.3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity=".15"/></linearGradient><linearGradient id="SVGvVhSdd6k" x1="2.2" x2="7.96" y1="9.94" y2="20.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c1a3a" stop-opacity=".1"/><stop offset="1" stop-color="#ff7ec1" stop-opacity=".32"/></linearGradient><radialGradient id="SVGfcP85b9I" cx="8.73" cy="8.38" r="9.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".8"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><path fill="url(#SVGvVhSdd6k)" d="M8.7 5.1L6.5 9.6l-1.2 1.5H3.5c-1.4.1-1.6 2-.7 2.7c.9.6 2.5.3 3.4.3c.4 0 1.5 0 1.7-.5L9.3 11l1.2 1.6L13 20c.4.9 2.1.9 2.5.1l2.2-4.5l1.2-1.5h1.8c1.4-.1 1.6-2 .7-2.7c-.9-.6-2.5-.3-3.4-.3c-.4 0-1.5 0-1.7.5L15 14.2l-1.3-1.6l-2.5-7.4c-.4-.9-2.1-.9-2.5-.1" class="wm-shadow"/><path fill="url(#SVG4yKthwRD)" stroke="#000" stroke-opacity=".3" stroke-width=".22" d="m6.36 8.71l-1.28 1.48c-.75.01-1.97-.2-2.57.42c-.63.65-.34 2.11.69 2.15l1 .03l1.7-.01l.98-.04c.23-.02.6-.3.7-.51l.51-1.02l1.73.68l2.16 4.22l.94 2.69c.26.73 1.78.76 2.1.08l2.22-4.59l1.29-1.48c.52-.01 1.62.11 2.17-.14c.97-.44.98-1.89 0-2.33c-.6-.26-2.44-.15-2.92-.13l-.98.04c-.26.01-.66.28-.78.52l-.51 1.02l-1.73-.68l-2.16-4.22l-.94-2.69c-.25-.73-1.72-.76-2.07-.11z"/><path stroke="url(#SVGIheFfdSP)" stroke-linejoin="round" stroke-width=".5" d="m5.78 10.4l-2.58.09c-.86.03-1 1.35-.42 1.8l.24.15l1.03.08l1.78.02l.97-.04c.57-.02.95-1.18 1.04-1.37l1.45-2.92c.08 0 .15 0 .23.01l.09.08l2.61 7.72c.32.96.35 2.12 1.07 2.83c.35.36 1.24.43 1.51-.09l.78-1.6c1.94-4.01.81-1.8 2.25-4.56l2.57-.09c.86-.03 1-1.35.42-1.8l-.24-.15l-1.03-.08l-1.78-.02l-.97.04c-.57.02-.95 1.18-1.04 1.38l-1.45 2.91c-.08 0-.15 0-.23-.01l-.09-.08l-2.61-7.72c-.32-.96-.35-2.12-1.07-2.83c-.35-.36-1.24-.43-1.51.09l-.78 1.6c-1.94 4.01-.81 1.8-2.24 4.56z"/><path fill="url(#SVGfcP85b9I)" d="m9 4.3l-3 6.2l-.2.2H3.2c-.5.1-.5.6-.5.9c.1.2.2.3.4.4c.6 0 3.6.3 3.8-.1l.5-1.1L8.8 8l.4-.3c.2 0 .5 0 .6.2l.9 2.7l2.6 7.7c.1.4.9.5 1.1.2l3-6.2l.2-.2h2.6c.5-.1.5-.6.5-.9c-.1-.2-.2-.3-.4-.4c-.6 0-3.6-.3-3.8.1L16 12l-1.4 2.8l-.4.3c-.2 0-.5 0-.6-.2l-.9-2.7L10 4.4l-.3-.2c-.2 0-.5-.1-.7.1" class="wm-shine"/><path fill="#ff7ec1" fill-opacity=".6" d="m10.43 4.1l-.04.01l2.55 7.68l.88 2.56l.11.03l-2.45-7.5l-.93-2.64zM9.02 8.05l-1.36 2.82c-.08.17-.5 1.38-1.06 1.42l-1 .07l-1.7.01l-1.23-.07l-.03.04c.58.37.78.33 1.59.34l1.67-.02l1-.07c.69-.05 1.87-3.11 1.96-3.31l.41-1l-.09-.23zm12 2.66c-.01 1.25-.29 1.63-1.62 1.66l-1.81.04l-2.17 4.48c-.61 1.28-.71 2.3-2.21 2c.04.03.03.1.07.13c1.38 1.03 2.03-.97 2.44-1.83l1.42-2.98l.75-1.5l1.81-.04c.67-.02 1.32-.08 1.56-.79c.15-.46.01-.8-.24-1.17"/><path fill="#b9e6ff" fill-opacity=".85" d="m10.22 4.29l-.05.02l2.53 7.63l.9 2.59l.09.08l.05-.03l-2.49-7.55l-.92-2.62zM8.8 7.87l-1.9 3.9c-.21.42-1.11.32-1.35.32c-.82.01-1.9 0-2.74.03c.15.1.29.25.49.26l.93.02l2.5-.03c.54-.01.93-1.21 1-1.35l1.46-2.93l.22-.11v-.09l-.21-.16c-.14.02-.31-.04-.4.14m12.01 3.04l-.06.03c0 .4-.12 1.11-.67 1.12l-2.55.07l-.23.14l-2.9 6.08c-.16.34-.73.33-1.03.35c.37.26 1.09.49 1.37-.1l2.86-6.03l.23-.14l2.56-.07c.52-.02.73-.77.6-1.16z" class="wm-shine"/><path fill="url(#SVGkQjiNcDo)" d="m6.36 8.71l-1.28 1.48l-1.95.06c-.61.08-1.03.81-.97 1.38c.03.29.16.44.3.67l.05-.05c-.22-2.03 1.26-1.73 2.87-1.76l1.27-1.46l2.21-4.59c.27-.54 1-.54 1.5-.48l.03-.06c-1.52-1.01-2.03.65-2.59 1.81zm4.17 2.6l-.9-2.43l.77 2.5l1.62 4.87l.88 2.53l.1.11l-.78-2.53zm7.27-1.09l-1.07.06c-.65.04-1 1.06-1.18 1.44l-.82 1.76l-.35 1.01c.89-1.13.46-.5 1.43-2.4c.2-.38.54-1.47 1.21-1.51l1.03-.07c.78-.05 2.11-.1 2.95.09l.02-.04c-.53-.38-.66-.33-1.47-.34z" class="wm-shine"/></g>`;
</script>.activity {
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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG4yKthwRD%22%20x1%3D%222.2%22%20x2%3D%2221.4%22%20y1%3D%223.7%22%20y2%3D%2219.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234a9dff%22%20stop-opacity%3D%22.14%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%234a9dff%22%20stop-opacity%3D%22.36%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a9dff%22%20stop-opacity%3D%22.62%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGIheFfdSP%22%20x1%3D%222.2%22%20x2%3D%2221.4%22%20y1%3D%223.7%22%20y2%3D%2219.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231c3f9e%22%20stop-opacity%3D%22.36%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231c3f9e%22%20stop-opacity%3D%22.95%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGkQjiNcDo%22%20x1%3D%226.04%22%20x2%3D%2221.4%22%20y1%3D%226.82%22%20y2%3D%2219.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.15%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGvVhSdd6k%22%20x1%3D%222.2%22%20x2%3D%227.96%22%20y1%3D%229.94%22%20y2%3D%2220.9%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230c1a3a%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff7ec1%22%20stop-opacity%3D%22.32%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGfcP85b9I%22%20cx%3D%228.73%22%20cy%3D%228.38%22%20r%3D%229.6%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGvVhSdd6k)%22%20d%3D%22M8.7%205.1L6.5%209.6l-1.2%201.5H3.5c-1.4.1-1.6%202-.7%202.7c.9.6%202.5.3%203.4.3c.4%200%201.5%200%201.7-.5L9.3%2011l1.2%201.6L13%2020c.4.9%202.1.9%202.5.1l2.2-4.5l1.2-1.5h1.8c1.4-.1%201.6-2%20.7-2.7c-.9-.6-2.5-.3-3.4-.3c-.4%200-1.5%200-1.7.5L15%2014.2l-1.3-1.6l-2.5-7.4c-.4-.9-2.1-.9-2.5-.1%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG4yKthwRD)%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.3%22%20stroke-width%3D%22.22%22%20d%3D%22m6.36%208.71l-1.28%201.48c-.75.01-1.97-.2-2.57.42c-.63.65-.34%202.11.69%202.15l1%20.03l1.7-.01l.98-.04c.23-.02.6-.3.7-.51l.51-1.02l1.73.68l2.16%204.22l.94%202.69c.26.73%201.78.76%202.1.08l2.22-4.59l1.29-1.48c.52-.01%201.62.11%202.17-.14c.97-.44.98-1.89%200-2.33c-.6-.26-2.44-.15-2.92-.13l-.98.04c-.26.01-.66.28-.78.52l-.51%201.02l-1.73-.68l-2.16-4.22l-.94-2.69c-.25-.73-1.72-.76-2.07-.11z%22%2F%3E%3Cpath%20stroke%3D%22url(%23SVGIheFfdSP)%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.5%22%20d%3D%22m5.78%2010.4l-2.58.09c-.86.03-1%201.35-.42%201.8l.24.15l1.03.08l1.78.02l.97-.04c.57-.02.95-1.18%201.04-1.37l1.45-2.92c.08%200%20.15%200%20.23.01l.09.08l2.61%207.72c.32.96.35%202.12%201.07%202.83c.35.36%201.24.43%201.51-.09l.78-1.6c1.94-4.01.81-1.8%202.25-4.56l2.57-.09c.86-.03%201-1.35.42-1.8l-.24-.15l-1.03-.08l-1.78-.02l-.97.04c-.57.02-.95%201.18-1.04%201.38l-1.45%202.91c-.08%200-.15%200-.23-.01l-.09-.08l-2.61-7.72c-.32-.96-.35-2.12-1.07-2.83c-.35-.36-1.24-.43-1.51.09l-.78%201.6c-1.94%204.01-.81%201.8-2.24%204.56z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfcP85b9I)%22%20d%3D%22m9%204.3l-3%206.2l-.2.2H3.2c-.5.1-.5.6-.5.9c.1.2.2.3.4.4c.6%200%203.6.3%203.8-.1l.5-1.1L8.8%208l.4-.3c.2%200%20.5%200%20.6.2l.9%202.7l2.6%207.7c.1.4.9.5%201.1.2l3-6.2l.2-.2h2.6c.5-.1.5-.6.5-.9c-.1-.2-.2-.3-.4-.4c-.6%200-3.6-.3-3.8.1L16%2012l-1.4%202.8l-.4.3c-.2%200-.5%200-.6-.2l-.9-2.7L10%204.4l-.3-.2c-.2%200-.5-.1-.7.1%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23ff7ec1%22%20fill-opacity%3D%22.6%22%20d%3D%22m10.43%204.1l-.04.01l2.55%207.68l.88%202.56l.11.03l-2.45-7.5l-.93-2.64zM9.02%208.05l-1.36%202.82c-.08.17-.5%201.38-1.06%201.42l-1%20.07l-1.7.01l-1.23-.07l-.03.04c.58.37.78.33%201.59.34l1.67-.02l1-.07c.69-.05%201.87-3.11%201.96-3.31l.41-1l-.09-.23zm12%202.66c-.01%201.25-.29%201.63-1.62%201.66l-1.81.04l-2.17%204.48c-.61%201.28-.71%202.3-2.21%202c.04.03.03.1.07.13c1.38%201.03%202.03-.97%202.44-1.83l1.42-2.98l.75-1.5l1.81-.04c.67-.02%201.32-.08%201.56-.79c.15-.46.01-.8-.24-1.17%22%2F%3E%3Cpath%20fill%3D%22%23b9e6ff%22%20fill-opacity%3D%22.85%22%20d%3D%22m10.22%204.29l-.05.02l2.53%207.63l.9%202.59l.09.08l.05-.03l-2.49-7.55l-.92-2.62zM8.8%207.87l-1.9%203.9c-.21.42-1.11.32-1.35.32c-.82.01-1.9%200-2.74.03c.15.1.29.25.49.26l.93.02l2.5-.03c.54-.01.93-1.21%201-1.35l1.46-2.93l.22-.11v-.09l-.21-.16c-.14.02-.31-.04-.4.14m12.01%203.04l-.06.03c0%20.4-.12%201.11-.67%201.12l-2.55.07l-.23.14l-2.9%206.08c-.16.34-.73.33-1.03.35c.37.26%201.09.49%201.37-.1l2.86-6.03l.23-.14l2.56-.07c.52-.02.73-.77.6-1.16z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkQjiNcDo)%22%20d%3D%22m6.36%208.71l-1.28%201.48l-1.95.06c-.61.08-1.03.81-.97%201.38c.03.29.16.44.3.67l.05-.05c-.22-2.03%201.26-1.73%202.87-1.76l1.27-1.46l2.21-4.59c.27-.54%201-.54%201.5-.48l.03-.06c-1.52-1.01-2.03.65-2.59%201.81zm4.17%202.6l-.9-2.43l.77%202.5l1.62%204.87l.88%202.53l.1.11l-.78-2.53zm7.27-1.09l-1.07.06c-.65.04-1%201.06-1.18%201.44l-.82%201.76l-.35%201.01c.89-1.13.46-.5%201.43-2.4c.2-.38.54-1.47%201.21-1.51l1.03-.07c.78-.05%202.11-.1%202.95.09l.02-.04c-.53-.38-.66-.33-1.47-.34z%22%20class%3D%22wm-shine%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%3Cdefs%3E%3ClinearGradient%20id%3D%22SVG4yKthwRD%22%20x1%3D%222.2%22%20x2%3D%2221.4%22%20y1%3D%223.7%22%20y2%3D%2219.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234a9dff%22%20stop-opacity%3D%22.14%22%2F%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%234a9dff%22%20stop-opacity%3D%22.36%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234a9dff%22%20stop-opacity%3D%22.62%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGIheFfdSP%22%20x1%3D%222.2%22%20x2%3D%2221.4%22%20y1%3D%223.7%22%20y2%3D%2219.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231c3f9e%22%20stop-opacity%3D%22.36%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231c3f9e%22%20stop-opacity%3D%22.95%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGkQjiNcDo%22%20x1%3D%226.04%22%20x2%3D%2221.4%22%20y1%3D%226.82%22%20y2%3D%2219.3%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.15%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGvVhSdd6k%22%20x1%3D%222.2%22%20x2%3D%227.96%22%20y1%3D%229.94%22%20y2%3D%2220.9%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230c1a3a%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff7ec1%22%20stop-opacity%3D%22.32%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22SVGfcP85b9I%22%20cx%3D%228.73%22%20cy%3D%228.38%22%20r%3D%229.6%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGvVhSdd6k)%22%20d%3D%22M8.7%205.1L6.5%209.6l-1.2%201.5H3.5c-1.4.1-1.6%202-.7%202.7c.9.6%202.5.3%203.4.3c.4%200%201.5%200%201.7-.5L9.3%2011l1.2%201.6L13%2020c.4.9%202.1.9%202.5.1l2.2-4.5l1.2-1.5h1.8c1.4-.1%201.6-2%20.7-2.7c-.9-.6-2.5-.3-3.4-.3c-.4%200-1.5%200-1.7.5L15%2014.2l-1.3-1.6l-2.5-7.4c-.4-.9-2.1-.9-2.5-.1%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG4yKthwRD)%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.3%22%20stroke-width%3D%22.22%22%20d%3D%22m6.36%208.71l-1.28%201.48c-.75.01-1.97-.2-2.57.42c-.63.65-.34%202.11.69%202.15l1%20.03l1.7-.01l.98-.04c.23-.02.6-.3.7-.51l.51-1.02l1.73.68l2.16%204.22l.94%202.69c.26.73%201.78.76%202.1.08l2.22-4.59l1.29-1.48c.52-.01%201.62.11%202.17-.14c.97-.44.98-1.89%200-2.33c-.6-.26-2.44-.15-2.92-.13l-.98.04c-.26.01-.66.28-.78.52l-.51%201.02l-1.73-.68l-2.16-4.22l-.94-2.69c-.25-.73-1.72-.76-2.07-.11z%22%2F%3E%3Cpath%20stroke%3D%22url(%23SVGIheFfdSP)%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.5%22%20d%3D%22m5.78%2010.4l-2.58.09c-.86.03-1%201.35-.42%201.8l.24.15l1.03.08l1.78.02l.97-.04c.57-.02.95-1.18%201.04-1.37l1.45-2.92c.08%200%20.15%200%20.23.01l.09.08l2.61%207.72c.32.96.35%202.12%201.07%202.83c.35.36%201.24.43%201.51-.09l.78-1.6c1.94-4.01.81-1.8%202.25-4.56l2.57-.09c.86-.03%201-1.35.42-1.8l-.24-.15l-1.03-.08l-1.78-.02l-.97.04c-.57.02-.95%201.18-1.04%201.38l-1.45%202.91c-.08%200-.15%200-.23-.01l-.09-.08l-2.61-7.72c-.32-.96-.35-2.12-1.07-2.83c-.35-.36-1.24-.43-1.51.09l-.78%201.6c-1.94%204.01-.81%201.8-2.24%204.56z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGfcP85b9I)%22%20d%3D%22m9%204.3l-3%206.2l-.2.2H3.2c-.5.1-.5.6-.5.9c.1.2.2.3.4.4c.6%200%203.6.3%203.8-.1l.5-1.1L8.8%208l.4-.3c.2%200%20.5%200%20.6.2l.9%202.7l2.6%207.7c.1.4.9.5%201.1.2l3-6.2l.2-.2h2.6c.5-.1.5-.6.5-.9c-.1-.2-.2-.3-.4-.4c-.6%200-3.6-.3-3.8.1L16%2012l-1.4%202.8l-.4.3c-.2%200-.5%200-.6-.2l-.9-2.7L10%204.4l-.3-.2c-.2%200-.5-.1-.7.1%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23ff7ec1%22%20fill-opacity%3D%22.6%22%20d%3D%22m10.43%204.1l-.04.01l2.55%207.68l.88%202.56l.11.03l-2.45-7.5l-.93-2.64zM9.02%208.05l-1.36%202.82c-.08.17-.5%201.38-1.06%201.42l-1%20.07l-1.7.01l-1.23-.07l-.03.04c.58.37.78.33%201.59.34l1.67-.02l1-.07c.69-.05%201.87-3.11%201.96-3.31l.41-1l-.09-.23zm12%202.66c-.01%201.25-.29%201.63-1.62%201.66l-1.81.04l-2.17%204.48c-.61%201.28-.71%202.3-2.21%202c.04.03.03.1.07.13c1.38%201.03%202.03-.97%202.44-1.83l1.42-2.98l.75-1.5l1.81-.04c.67-.02%201.32-.08%201.56-.79c.15-.46.01-.8-.24-1.17%22%2F%3E%3Cpath%20fill%3D%22%23b9e6ff%22%20fill-opacity%3D%22.85%22%20d%3D%22m10.22%204.29l-.05.02l2.53%207.63l.9%202.59l.09.08l.05-.03l-2.49-7.55l-.92-2.62zM8.8%207.87l-1.9%203.9c-.21.42-1.11.32-1.35.32c-.82.01-1.9%200-2.74.03c.15.1.29.25.49.26l.93.02l2.5-.03c.54-.01.93-1.21%201-1.35l1.46-2.93l.22-.11v-.09l-.21-.16c-.14.02-.31-.04-.4.14m12.01%203.04l-.06.03c0%20.4-.12%201.11-.67%201.12l-2.55.07l-.23.14l-2.9%206.08c-.16.34-.73.33-1.03.35c.37.26%201.09.49%201.37-.1l2.86-6.03l.23-.14l2.56-.07c.52-.02.73-.77.6-1.16z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGkQjiNcDo)%22%20d%3D%22m6.36%208.71l-1.28%201.48l-1.95.06c-.61.08-1.03.81-.97%201.38c.03.29.16.44.3.67l.05-.05c-.22-2.03%201.26-1.73%202.87-1.76l1.27-1.46l2.21-4.59c.27-.54%201-.54%201.5-.48l.03-.06c-1.52-1.01-2.03.65-2.59%201.81zm4.17%202.6l-.9-2.43l.77%202.5l1.62%204.87l.88%202.53l.1.11l-.78-2.53zm7.27-1.09l-1.07.06c-.65.04-1%201.06-1.18%201.44l-.82%201.76l-.35%201.01c.89-1.13.46-.5%201.43-2.4c.2-.38.54-1.47%201.21-1.51l1.03-.07c.78-.05%202.11-.1%202.95.09l.02-.04c-.53-.38-.66-.33-1.47-.34z%22%20class%3D%22wm-shine%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
透明度往复渐变,适合状态提示与在线指示。
.icon-activity {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转,适合加载中场景。
.icon-activity {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}线条从无到有依次绘出,适合线性图标与首屏引导。
.icon-activity path {
stroke-dasharray: 120;
animation: icon-draw 1.2s ease forwards;
}
@keyframes icon-draw {
from { stroke-dashoffset: 120; }
to { stroke-dashoffset: 0; }
}对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
4.29 KB
4,394 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
7
<path> ×7
风格
多色填充
描边可随字号加粗
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 4.29 KB(4,394 字节),图元 7 个,风格为多色填充。
关于 activity 图标的下载、商用与改色。
它是 with icons Liquid(withicons-liquid)开源图标集中的 activity 图标,多色填充,viewBox 为 0 0 24 24,文件仅 4.29 KB,矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
该图标采用 MIT(MIT) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。