fluent-emojia-button-blood-type
来自 Fluent Emoji 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。
SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。
PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。
切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。
浅色背景
深色背景灰底融入继续按钮内 · 主操作搜索a-button-blood-type…输入框 · 前缀图标a-button-blood-type导航菜单 · 选中态暂无内容空状态 · 引导提示a-button-blood-type手机桌面 · App 图标a-button-blood-typefluent-emoji.design/icons/a-button-blood-type浏览器 · 标签页与站点图标24px32px48px64px96px128px内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><g filter="url(#ibyFc8b)"><rect width="27.875" height="27.875" x="2.301" y="1.688" fill="url(#iARI8od)" rx="3.6"/><rect width="27.875" height="27.875" x="2.301" y="1.688" fill="url(#iZup4Ob)" rx="3.6"/></g><g filter="url(#irg8qed)"><path stroke="url(#i40vimc)" stroke-linecap="round" stroke-width="1.5" d="M28.489 4.188v22.875"/></g><g filter="url(#i8nOY5b)"><path stroke="url(#i94ftYE)" stroke-linecap="round" stroke-width="1.5" d="M5.765 3.5h21.781"/></g><g filter="url(#iMLxmyd)"><path fill="#EF2B54" d="M18.193 8.403a1.75 1.75 0 0 0-3.249.018l-5.18 13.122a1.75 1.75 0 0 0 3.255 1.286l.71-1.798a.1.1 0 0 1 .093-.063h5.647a.1.1 0 0 1 .092.062l.74 1.816a1.75 1.75 0 1 0 3.242-1.32zm-.14 8.927a.1.1 0 0 1-.094.138h-2.677a.1.1 0 0 1-.093-.137l1.317-3.336a.1.1 0 0 1 .186-.001z"/></g><g filter="url(#iqbOeRc)"><path fill="#FCF2FF" d="M18.193 8.403a1.75 1.75 0 0 0-3.249.018l-5.18 13.122a1.75 1.75 0 0 0 3.255 1.286l.71-1.798a.1.1 0 0 1 .093-.063h5.647a.1.1 0 0 1 .092.062l.74 1.816a1.75 1.75 0 1 0 3.242-1.32zm-.14 8.927a.1.1 0 0 1-.094.138h-2.677a.1.1 0 0 1-.093-.137l1.317-3.336a.1.1 0 0 1 .186-.001z"/></g><defs><filter id="ibyFc8b" width="28.875" height="28.875" x="2.301" y=".688" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1" dy="-1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.901961 0 0 0 0 0.133333 0 0 0 0 0.337255 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_2284"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.85098 0 0 0 0 0.168627 0 0 0 0 0.231373 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_2284" result="effect2_innerShadow_18590_2284"/></filter><filter id="irg8qed" width="5.5" height="28.375" x="25.739" y="1.438" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation="1"/></filter><filter id="i8nOY5b" width="27.281" height="5.5" x="3.015" y=".75" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation="1"/></filter><filter id="iMLxmyd" width="16.032" height="18.623" x="8.64" y="6.314" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation=".5"/></filter><filter id="iqbOeRc" width="14.832" height="17.423" x="9.24" y="6.914" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.4" dy=".4"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.913725 0 0 0 0 0.886275 0 0 0 0 0.968627 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_2284"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".4" dy="-.4"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_2284" result="effect2_innerShadow_18590_2284"/></filter><linearGradient id="iARI8od" x1="16.239" x2="16.239" y1="5.262" y2="38.515" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4D91"/><stop offset="1" stop-color="#F34A5F"/></linearGradient><linearGradient id="i40vimc" x1="28.989" x2="28.989" y1="4.188" y2="27.063" gradientUnits="userSpaceOnUse"><stop stop-color="#FF66A5"/><stop offset="1" stop-color="#FF5B6B"/></linearGradient><linearGradient id="i94ftYE" x1="28.703" x2="3.171" y1="3.75" y2="3.75" gradientUnits="userSpaceOnUse"><stop stop-color="#FF60A3"/><stop offset="1" stop-color="#FF5495"/></linearGradient><radialGradient id="iZup4Ob" cx="0" cy="0" r="1" gradientTransform="matrix(-1.56249 1.46876 -1.71548 -1.82495 27.957 3.781)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF77B1"/><stop offset="1" stop-color="#FF77B1" stop-opacity="0"/></radialGradient></defs></g></svg>export function AButtonBloodTypeIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 32 32"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<g fill="none"><g filter="url(#ibyFc8b)"><rect width="27.875" height="27.875" x="2.301" y="1.688" fill="url(#iARI8od)" rx="3.6"/><rect width="27.875" height="27.875" x="2.301" y="1.688" fill="url(#iZup4Ob)" rx="3.6"/></g><g filter="url(#irg8qed)"><path stroke="url(#i40vimc)" stroke-linecap="round" stroke-width="1.5" d="M28.489 4.188v22.875"/></g><g filter="url(#i8nOY5b)"><path stroke="url(#i94ftYE)" stroke-linecap="round" stroke-width="1.5" d="M5.765 3.5h21.781"/></g><g filter="url(#iMLxmyd)"><path fill="#EF2B54" d="M18.193 8.403a1.75 1.75 0 0 0-3.249.018l-5.18 13.122a1.75 1.75 0 0 0 3.255 1.286l.71-1.798a.1.1 0 0 1 .093-.063h5.647a.1.1 0 0 1 .092.062l.74 1.816a1.75 1.75 0 1 0 3.242-1.32zm-.14 8.927a.1.1 0 0 1-.094.138h-2.677a.1.1 0 0 1-.093-.137l1.317-3.336a.1.1 0 0 1 .186-.001z"/></g><g filter="url(#iqbOeRc)"><path fill="#FCF2FF" d="M18.193 8.403a1.75 1.75 0 0 0-3.249.018l-5.18 13.122a1.75 1.75 0 0 0 3.255 1.286l.71-1.798a.1.1 0 0 1 .093-.063h5.647a.1.1 0 0 1 .092.062l.74 1.816a1.75 1.75 0 1 0 3.242-1.32zm-.14 8.927a.1.1 0 0 1-.094.138h-2.677a.1.1 0 0 1-.093-.137l1.317-3.336a.1.1 0 0 1 .186-.001z"/></g><defs><filter id="ibyFc8b" width="28.875" height="28.875" x="2.301" y=".688" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1" dy="-1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.901961 0 0 0 0 0.133333 0 0 0 0 0.337255 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_2284"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.85098 0 0 0 0 0.168627 0 0 0 0 0.231373 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_2284" result="effect2_innerShadow_18590_2284"/></filter><filter id="irg8qed" width="5.5" height="28.375" x="25.739" y="1.438" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation="1"/></filter><filter id="i8nOY5b" width="27.281" height="5.5" x="3.015" y=".75" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation="1"/></filter><filter id="iMLxmyd" width="16.032" height="18.623" x="8.64" y="6.314" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation=".5"/></filter><filter id="iqbOeRc" width="14.832" height="17.423" x="9.24" y="6.914" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.4" dy=".4"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.913725 0 0 0 0 0.886275 0 0 0 0 0.968627 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_2284"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".4" dy="-.4"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_2284" result="effect2_innerShadow_18590_2284"/></filter><linearGradient id="iARI8od" x1="16.239" x2="16.239" y1="5.262" y2="38.515" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4D91"/><stop offset="1" stop-color="#F34A5F"/></linearGradient><linearGradient id="i40vimc" x1="28.989" x2="28.989" y1="4.188" y2="27.063" gradientUnits="userSpaceOnUse"><stop stop-color="#FF66A5"/><stop offset="1" stop-color="#FF5B6B"/></linearGradient><linearGradient id="i94ftYE" x1="28.703" x2="3.171" y1="3.75" y2="3.75" gradientUnits="userSpaceOnUse"><stop stop-color="#FF60A3"/><stop offset="1" stop-color="#FF5495"/></linearGradient><radialGradient id="iZup4Ob" cx="0" cy="0" r="1" gradientTransform="matrix(-1.56249 1.46876 -1.71548 -1.82495 27.957 3.781)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF77B1"/><stop offset="1" stop-color="#FF77B1" stop-opacity="0"/></radialGradient></defs></g>` }}
/>
);
}<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<g fill="none"><g filter="url(#ibyFc8b)"><rect width="27.875" height="27.875" x="2.301" y="1.688" fill="url(#iARI8od)" rx="3.6"/><rect width="27.875" height="27.875" x="2.301" y="1.688" fill="url(#iZup4Ob)" rx="3.6"/></g><g filter="url(#irg8qed)"><path stroke="url(#i40vimc)" stroke-linecap="round" stroke-width="1.5" d="M28.489 4.188v22.875"/></g><g filter="url(#i8nOY5b)"><path stroke="url(#i94ftYE)" stroke-linecap="round" stroke-width="1.5" d="M5.765 3.5h21.781"/></g><g filter="url(#iMLxmyd)"><path fill="#EF2B54" d="M18.193 8.403a1.75 1.75 0 0 0-3.249.018l-5.18 13.122a1.75 1.75 0 0 0 3.255 1.286l.71-1.798a.1.1 0 0 1 .093-.063h5.647a.1.1 0 0 1 .092.062l.74 1.816a1.75 1.75 0 1 0 3.242-1.32zm-.14 8.927a.1.1 0 0 1-.094.138h-2.677a.1.1 0 0 1-.093-.137l1.317-3.336a.1.1 0 0 1 .186-.001z"/></g><g filter="url(#iqbOeRc)"><path fill="#FCF2FF" d="M18.193 8.403a1.75 1.75 0 0 0-3.249.018l-5.18 13.122a1.75 1.75 0 0 0 3.255 1.286l.71-1.798a.1.1 0 0 1 .093-.063h5.647a.1.1 0 0 1 .092.062l.74 1.816a1.75 1.75 0 1 0 3.242-1.32zm-.14 8.927a.1.1 0 0 1-.094.138h-2.677a.1.1 0 0 1-.093-.137l1.317-3.336a.1.1 0 0 1 .186-.001z"/></g><defs><filter id="ibyFc8b" width="28.875" height="28.875" x="2.301" y=".688" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="1" dy="-1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.901961 0 0 0 0 0.133333 0 0 0 0 0.337255 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_2284"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.85098 0 0 0 0 0.168627 0 0 0 0 0.231373 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_2284" result="effect2_innerShadow_18590_2284"/></filter><filter id="irg8qed" width="5.5" height="28.375" x="25.739" y="1.438" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation="1"/></filter><filter id="i8nOY5b" width="27.281" height="5.5" x="3.015" y=".75" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation="1"/></filter><filter id="iMLxmyd" width="16.032" height="18.623" x="8.64" y="6.314" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_2284" stdDeviation=".5"/></filter><filter id="iqbOeRc" width="14.832" height="17.423" x="9.24" y="6.914" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.4" dy=".4"/><feGaussianBlur stdDeviation=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.913725 0 0 0 0 0.886275 0 0 0 0 0.968627 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_2284"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".4" dy="-.4"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.988235 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18590_2284" result="effect2_innerShadow_18590_2284"/></filter><linearGradient id="iARI8od" x1="16.239" x2="16.239" y1="5.262" y2="38.515" gradientUnits="userSpaceOnUse"><stop stop-color="#FF4D91"/><stop offset="1" stop-color="#F34A5F"/></linearGradient><linearGradient id="i40vimc" x1="28.989" x2="28.989" y1="4.188" y2="27.063" gradientUnits="userSpaceOnUse"><stop stop-color="#FF66A5"/><stop offset="1" stop-color="#FF5B6B"/></linearGradient><linearGradient id="i94ftYE" x1="28.703" x2="3.171" y1="3.75" y2="3.75" gradientUnits="userSpaceOnUse"><stop stop-color="#FF60A3"/><stop offset="1" stop-color="#FF5495"/></linearGradient><radialGradient id="iZup4Ob" cx="0" cy="0" r="1" gradientTransform="matrix(-1.56249 1.46876 -1.71548 -1.82495 27.957 3.781)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF77B1"/><stop offset="1" stop-color="#FF77B1" stop-opacity="0"/></radialGradient></defs></g>`;
</script>.a-button-blood-type {
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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url(%23ibyFc8b)%22%3E%3Crect%20width%3D%2227.875%22%20height%3D%2227.875%22%20x%3D%222.301%22%20y%3D%221.688%22%20fill%3D%22url(%23iARI8od)%22%20rx%3D%223.6%22%2F%3E%3Crect%20width%3D%2227.875%22%20height%3D%2227.875%22%20x%3D%222.301%22%20y%3D%221.688%22%20fill%3D%22url(%23iZup4Ob)%22%20rx%3D%223.6%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23irg8qed)%22%3E%3Cpath%20stroke%3D%22url(%23i40vimc)%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M28.489%204.188v22.875%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23i8nOY5b)%22%3E%3Cpath%20stroke%3D%22url(%23i94ftYE)%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M5.765%203.5h21.781%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23iMLxmyd)%22%3E%3Cpath%20fill%3D%22%23EF2B54%22%20d%3D%22M18.193%208.403a1.75%201.75%200%200%200-3.249.018l-5.18%2013.122a1.75%201.75%200%200%200%203.255%201.286l.71-1.798a.1.1%200%200%201%20.093-.063h5.647a.1.1%200%200%201%20.092.062l.74%201.816a1.75%201.75%200%201%200%203.242-1.32zm-.14%208.927a.1.1%200%200%201-.094.138h-2.677a.1.1%200%200%201-.093-.137l1.317-3.336a.1.1%200%200%201%20.186-.001z%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23iqbOeRc)%22%3E%3Cpath%20fill%3D%22%23FCF2FF%22%20d%3D%22M18.193%208.403a1.75%201.75%200%200%200-3.249.018l-5.18%2013.122a1.75%201.75%200%200%200%203.255%201.286l.71-1.798a.1.1%200%200%201%20.093-.063h5.647a.1.1%200%200%201%20.092.062l.74%201.816a1.75%201.75%200%201%200%203.242-1.32zm-.14%208.927a.1.1%200%200%201-.094.138h-2.677a.1.1%200%200%201-.093-.137l1.317-3.336a.1.1%200%200%201%20.186-.001z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22ibyFc8b%22%20width%3D%2228.875%22%20height%3D%2228.875%22%20x%3D%222.301%22%20y%3D%22.688%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%22-1%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221.5%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.901961%200%200%200%200%200.133333%200%200%200%200%200.337255%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_18590_2284%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dy%3D%22-1%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221.5%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.85098%200%200%200%200%200.168627%200%200%200%200%200.231373%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18590_2284%22%20result%3D%22effect2_innerShadow_18590_2284%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22irg8qed%22%20width%3D%225.5%22%20height%3D%2228.375%22%20x%3D%2225.739%22%20y%3D%221.438%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18590_2284%22%20stdDeviation%3D%221%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22i8nOY5b%22%20width%3D%2227.281%22%20height%3D%225.5%22%20x%3D%223.015%22%20y%3D%22.75%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18590_2284%22%20stdDeviation%3D%221%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22iMLxmyd%22%20width%3D%2216.032%22%20height%3D%2218.623%22%20x%3D%228.64%22%20y%3D%226.314%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18590_2284%22%20stdDeviation%3D%22.5%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22iqbOeRc%22%20width%3D%2214.832%22%20height%3D%2217.423%22%20x%3D%229.24%22%20y%3D%226.914%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22-.4%22%20dy%3D%22.4%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.375%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.913725%200%200%200%200%200.886275%200%200%200%200%200.968627%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_18590_2284%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22.4%22%20dy%3D%22-.4%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.2%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%200.988235%200%200%200%200%201%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18590_2284%22%20result%3D%22effect2_innerShadow_18590_2284%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22iARI8od%22%20x1%3D%2216.239%22%20x2%3D%2216.239%22%20y1%3D%225.262%22%20y2%3D%2238.515%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF4D91%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F34A5F%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22i40vimc%22%20x1%3D%2228.989%22%20x2%3D%2228.989%22%20y1%3D%224.188%22%20y2%3D%2227.063%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF66A5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF5B6B%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22i94ftYE%22%20x1%3D%2228.703%22%20x2%3D%223.171%22%20y1%3D%223.75%22%20y2%3D%223.75%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF60A3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF5495%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22iZup4Ob%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.56249%201.46876%20-1.71548%20-1.82495%2027.957%203.781)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF77B1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF77B1%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url(%23ibyFc8b)%22%3E%3Crect%20width%3D%2227.875%22%20height%3D%2227.875%22%20x%3D%222.301%22%20y%3D%221.688%22%20fill%3D%22url(%23iARI8od)%22%20rx%3D%223.6%22%2F%3E%3Crect%20width%3D%2227.875%22%20height%3D%2227.875%22%20x%3D%222.301%22%20y%3D%221.688%22%20fill%3D%22url(%23iZup4Ob)%22%20rx%3D%223.6%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23irg8qed)%22%3E%3Cpath%20stroke%3D%22url(%23i40vimc)%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M28.489%204.188v22.875%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23i8nOY5b)%22%3E%3Cpath%20stroke%3D%22url(%23i94ftYE)%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M5.765%203.5h21.781%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23iMLxmyd)%22%3E%3Cpath%20fill%3D%22%23EF2B54%22%20d%3D%22M18.193%208.403a1.75%201.75%200%200%200-3.249.018l-5.18%2013.122a1.75%201.75%200%200%200%203.255%201.286l.71-1.798a.1.1%200%200%201%20.093-.063h5.647a.1.1%200%200%201%20.092.062l.74%201.816a1.75%201.75%200%201%200%203.242-1.32zm-.14%208.927a.1.1%200%200%201-.094.138h-2.677a.1.1%200%200%201-.093-.137l1.317-3.336a.1.1%200%200%201%20.186-.001z%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23iqbOeRc)%22%3E%3Cpath%20fill%3D%22%23FCF2FF%22%20d%3D%22M18.193%208.403a1.75%201.75%200%200%200-3.249.018l-5.18%2013.122a1.75%201.75%200%200%200%203.255%201.286l.71-1.798a.1.1%200%200%201%20.093-.063h5.647a.1.1%200%200%201%20.092.062l.74%201.816a1.75%201.75%200%201%200%203.242-1.32zm-.14%208.927a.1.1%200%200%201-.094.138h-2.677a.1.1%200%200%201-.093-.137l1.317-3.336a.1.1%200%200%201%20.186-.001z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22ibyFc8b%22%20width%3D%2228.875%22%20height%3D%2228.875%22%20x%3D%222.301%22%20y%3D%22.688%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%22-1%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221.5%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.901961%200%200%200%200%200.133333%200%200%200%200%200.337255%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_18590_2284%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dy%3D%22-1%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%221.5%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.85098%200%200%200%200%200.168627%200%200%200%200%200.231373%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18590_2284%22%20result%3D%22effect2_innerShadow_18590_2284%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22irg8qed%22%20width%3D%225.5%22%20height%3D%2228.375%22%20x%3D%2225.739%22%20y%3D%221.438%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18590_2284%22%20stdDeviation%3D%221%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22i8nOY5b%22%20width%3D%2227.281%22%20height%3D%225.5%22%20x%3D%223.015%22%20y%3D%22.75%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18590_2284%22%20stdDeviation%3D%221%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22iMLxmyd%22%20width%3D%2216.032%22%20height%3D%2218.623%22%20x%3D%228.64%22%20y%3D%226.314%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20result%3D%22effect1_foregroundBlur_18590_2284%22%20stdDeviation%3D%22.5%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22iqbOeRc%22%20width%3D%2214.832%22%20height%3D%2217.423%22%20x%3D%229.24%22%20y%3D%226.914%22%20color-interpolation-filters%3D%22sRGB%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22-.4%22%20dy%3D%22.4%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.375%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.913725%200%200%200%200%200.886275%200%200%200%200%200.968627%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22shape%22%20result%3D%22effect1_innerShadow_18590_2284%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20result%3D%22hardAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%2F%3E%3CfeOffset%20dx%3D%22.4%22%20dy%3D%22-.4%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22.2%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%200.988235%200%200%200%200%201%200%200%200%201%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_innerShadow_18590_2284%22%20result%3D%22effect2_innerShadow_18590_2284%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22iARI8od%22%20x1%3D%2216.239%22%20x2%3D%2216.239%22%20y1%3D%225.262%22%20y2%3D%2238.515%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF4D91%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F34A5F%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22i40vimc%22%20x1%3D%2228.989%22%20x2%3D%2228.989%22%20y1%3D%224.188%22%20y2%3D%2227.063%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF66A5%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF5B6B%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22i94ftYE%22%20x1%3D%2228.703%22%20x2%3D%223.171%22%20y1%3D%223.75%22%20y2%3D%223.75%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF60A3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF5495%22%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%22iZup4Ob%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.56249%201.46876%20-1.71548%20-1.82495%2027.957%203.781)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF77B1%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF77B1%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。
透明度往复渐变，适合状态提示与在线指示。
.icon-a-button-blood-type {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转，适合加载中场景。
.icon-a-button-blood-type {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}线条从无到有依次绘出，适合线性图标与首屏引导。
.icon-a-button-blood-type path {
stroke-dasharray: 120;
animation: icon-draw 1.2s ease forwards;
}
@keyframes icon-draw {
from { stroke-dashoffset: 120; }
to { stroke-dashoffset: 0; }
}对源文件的客观技术指标，供工程侧评估引用方式。
文件体积
5.06 KB
5,180 字节
viewBox
0 0 32 32
矢量坐标系
图元总数
6
<path> ×4
风格
多色填充
描边可随字号加粗
同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 5.06 KB（5,180 字节），图元 6 个，风格为多色填充。
关于 a-button-blood-type 图标的下载、商用与改色。
它是 Fluent Emoji（fluent-emoji）开源图标集中的 a-button-blood-type 图标，多色填充，viewBox 为 0 0 32 32，文件仅 5.06 KB，矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。
该图标采用 MIT（MIT） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。