ace-stream SVG 图标
selfhstace-stream
来自 selfh.st/icons 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
- 图标 ID
- selfhst:ace-stream
- 中文名
- —
- 所属集合
- selfh.st/icons
- 集合规模
- 7,272 枚
- 基础网格
- —
- 色彩
- 多色
- 开源协议
- CC-BY-4.0
- 作者
- selfh.st
selfhstace-stream
来自 selfh.st/icons 开源图标集,矢量 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 512 512"><path fill="#f15e4b" fill-rule="evenodd" d="M430.5 49.9c-37.4-23.2-73.7-26.5-106.6-19.5c-31.6 6.7-62 23.5-87.8 43.4c-6.7-4.3-13.1-8.6-19.5-12.7c-5.8 12.6-11.7 25.5-17.8 38.6c-6.1 13.4-12.4 27.1-18.7 41c16.9-5.5 34-11 51.6-16.7l54.5-17.6l-25.1-16.3c23.1-16.6 48.5-30.6 75.7-38.6c30.5-8.9 62.9-9.5 93.7-1.7z"/><path fill="#8a5da7" fill-rule="evenodd" d="M490.8 258.3c29-62.5 25.6-103.5 5.6-128.8c-18.6-23.6-51.5-33.8-86.3-35.6q7.35-16.5 14.4-32.4L367 88.3l-55.7 26.1c9.6 9.1 19.6 18.6 29.9 28.4l33.4 31.7c5.9-13.4 11.7-26.7 17.4-39.7c28.5 4 54.9 13.2 73.5 31.2c19.6 19.2 30.5 48.5 25.3 92.5z"/><path fill="#4a8da0" fill-rule="evenodd" d="M242.8 484.8c76.2-14.2 126.4-48 154.8-88.6c12.2-17.3 20.8-36.9 25.2-57.6s4.5-42.2.3-62.9c17.5-5.8 35-11.8 52.9-17.9c-19.8-10.8-38.8-21.3-56.9-31.4c-17.3-9.4-34-18.5-50-27.2c-9.4 18.2-19 36.8-28.8 55.9c-9.9 19.4-20.1 39.3-30.4 59.6c17.5-6 35.1-12.1 53.1-18.3c2.7 34.1-4.6 68.3-21 98.4c-18.6 33.8-50.3 65.5-99.2 90"/><path fill="#26a75a" fill-rule="evenodd" d="M17.5 394.2c19.6 42.9 50.7 61.4 86.2 62.4c37.4 1 77.6-17.4 112.7-43.7c9.4 10.4 19.1 21 29.1 32c7.6-22.3 15.1-44 22.4-65.1c7.1-20.4 14.1-40.4 20.8-59.9c-22.9 5.2-45.3 10.2-67.1 15.1l-63 14.3c8.6 9.3 17.3 19 26.4 28.9c-28.8 19.7-59 34.4-88.7 38.3c-28.7 3.9-55.9-2.2-78.9-22.4v.1z"/><path fill="#fec827" fill-rule="evenodd" d="M38.9 189C8.6 233.5-2 266.7.3 291c2.4 25.7 19.5 41.6 42.8 49.6c-7 13.3-14.3 26.7-21.6 40.3c17.7-8 35.7-16.2 53.8-24.4c18.3-8.2 36.9-16.7 55.6-25.2c-7.6-14-14.9-27.5-22-40.5c-6.8-12.5-13.3-24.5-19.7-36.2c-7.1 13.2-14.2 26.5-21.5 40.1c-18.7-6.9-33.1-18-38.9-35.7c-5.4-16.7-3.3-39.4 10.1-70"/><path fill="#f58120" fill-rule="evenodd" d="M226.6 42.3c-48.7 14.1-81.3 33.1-103.1 54c-19.7 18.3-33.5 42.1-39.5 68.4l-33.1 11c7.1 7.7 14.5 15.6 22.1 23.7c7.9 8.4 16.1 17.1 24.5 26.1c11.5-15.2 22.8-30.1 34-44.8c11-14.3 21.8-28.6 32.3-42.6c-13.1 4.3-26.1 8.6-39 12.8c5.2-21.3 15.5-41 29.9-57.4c15.6-17.8 38.5-35.2 71.9-51.2"/></svg>export function AceStreamIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 512"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<path fill="#f15e4b" fill-rule="evenodd" d="M430.5 49.9c-37.4-23.2-73.7-26.5-106.6-19.5c-31.6 6.7-62 23.5-87.8 43.4c-6.7-4.3-13.1-8.6-19.5-12.7c-5.8 12.6-11.7 25.5-17.8 38.6c-6.1 13.4-12.4 27.1-18.7 41c16.9-5.5 34-11 51.6-16.7l54.5-17.6l-25.1-16.3c23.1-16.6 48.5-30.6 75.7-38.6c30.5-8.9 62.9-9.5 93.7-1.7z"/><path fill="#8a5da7" fill-rule="evenodd" d="M490.8 258.3c29-62.5 25.6-103.5 5.6-128.8c-18.6-23.6-51.5-33.8-86.3-35.6q7.35-16.5 14.4-32.4L367 88.3l-55.7 26.1c9.6 9.1 19.6 18.6 29.9 28.4l33.4 31.7c5.9-13.4 11.7-26.7 17.4-39.7c28.5 4 54.9 13.2 73.5 31.2c19.6 19.2 30.5 48.5 25.3 92.5z"/><path fill="#4a8da0" fill-rule="evenodd" d="M242.8 484.8c76.2-14.2 126.4-48 154.8-88.6c12.2-17.3 20.8-36.9 25.2-57.6s4.5-42.2.3-62.9c17.5-5.8 35-11.8 52.9-17.9c-19.8-10.8-38.8-21.3-56.9-31.4c-17.3-9.4-34-18.5-50-27.2c-9.4 18.2-19 36.8-28.8 55.9c-9.9 19.4-20.1 39.3-30.4 59.6c17.5-6 35.1-12.1 53.1-18.3c2.7 34.1-4.6 68.3-21 98.4c-18.6 33.8-50.3 65.5-99.2 90"/><path fill="#26a75a" fill-rule="evenodd" d="M17.5 394.2c19.6 42.9 50.7 61.4 86.2 62.4c37.4 1 77.6-17.4 112.7-43.7c9.4 10.4 19.1 21 29.1 32c7.6-22.3 15.1-44 22.4-65.1c7.1-20.4 14.1-40.4 20.8-59.9c-22.9 5.2-45.3 10.2-67.1 15.1l-63 14.3c8.6 9.3 17.3 19 26.4 28.9c-28.8 19.7-59 34.4-88.7 38.3c-28.7 3.9-55.9-2.2-78.9-22.4v.1z"/><path fill="#fec827" fill-rule="evenodd" d="M38.9 189C8.6 233.5-2 266.7.3 291c2.4 25.7 19.5 41.6 42.8 49.6c-7 13.3-14.3 26.7-21.6 40.3c17.7-8 35.7-16.2 53.8-24.4c18.3-8.2 36.9-16.7 55.6-25.2c-7.6-14-14.9-27.5-22-40.5c-6.8-12.5-13.3-24.5-19.7-36.2c-7.1 13.2-14.2 26.5-21.5 40.1c-18.7-6.9-33.1-18-38.9-35.7c-5.4-16.7-3.3-39.4 10.1-70"/><path fill="#f58120" fill-rule="evenodd" d="M226.6 42.3c-48.7 14.1-81.3 33.1-103.1 54c-19.7 18.3-33.5 42.1-39.5 68.4l-33.1 11c7.1 7.7 14.5 15.6 22.1 23.7c7.9 8.4 16.1 17.1 24.5 26.1c11.5-15.2 22.8-30.1 34-44.8c11-14.3 21.8-28.6 32.3-42.6c-13.1 4.3-26.1 8.6-39 12.8c5.2-21.3 15.5-41 29.9-57.4c15.6-17.8 38.5-35.2 71.9-51.2"/>` }}
/>
);
}<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<path fill="#f15e4b" fill-rule="evenodd" d="M430.5 49.9c-37.4-23.2-73.7-26.5-106.6-19.5c-31.6 6.7-62 23.5-87.8 43.4c-6.7-4.3-13.1-8.6-19.5-12.7c-5.8 12.6-11.7 25.5-17.8 38.6c-6.1 13.4-12.4 27.1-18.7 41c16.9-5.5 34-11 51.6-16.7l54.5-17.6l-25.1-16.3c23.1-16.6 48.5-30.6 75.7-38.6c30.5-8.9 62.9-9.5 93.7-1.7z"/><path fill="#8a5da7" fill-rule="evenodd" d="M490.8 258.3c29-62.5 25.6-103.5 5.6-128.8c-18.6-23.6-51.5-33.8-86.3-35.6q7.35-16.5 14.4-32.4L367 88.3l-55.7 26.1c9.6 9.1 19.6 18.6 29.9 28.4l33.4 31.7c5.9-13.4 11.7-26.7 17.4-39.7c28.5 4 54.9 13.2 73.5 31.2c19.6 19.2 30.5 48.5 25.3 92.5z"/><path fill="#4a8da0" fill-rule="evenodd" d="M242.8 484.8c76.2-14.2 126.4-48 154.8-88.6c12.2-17.3 20.8-36.9 25.2-57.6s4.5-42.2.3-62.9c17.5-5.8 35-11.8 52.9-17.9c-19.8-10.8-38.8-21.3-56.9-31.4c-17.3-9.4-34-18.5-50-27.2c-9.4 18.2-19 36.8-28.8 55.9c-9.9 19.4-20.1 39.3-30.4 59.6c17.5-6 35.1-12.1 53.1-18.3c2.7 34.1-4.6 68.3-21 98.4c-18.6 33.8-50.3 65.5-99.2 90"/><path fill="#26a75a" fill-rule="evenodd" d="M17.5 394.2c19.6 42.9 50.7 61.4 86.2 62.4c37.4 1 77.6-17.4 112.7-43.7c9.4 10.4 19.1 21 29.1 32c7.6-22.3 15.1-44 22.4-65.1c7.1-20.4 14.1-40.4 20.8-59.9c-22.9 5.2-45.3 10.2-67.1 15.1l-63 14.3c8.6 9.3 17.3 19 26.4 28.9c-28.8 19.7-59 34.4-88.7 38.3c-28.7 3.9-55.9-2.2-78.9-22.4v.1z"/><path fill="#fec827" fill-rule="evenodd" d="M38.9 189C8.6 233.5-2 266.7.3 291c2.4 25.7 19.5 41.6 42.8 49.6c-7 13.3-14.3 26.7-21.6 40.3c17.7-8 35.7-16.2 53.8-24.4c18.3-8.2 36.9-16.7 55.6-25.2c-7.6-14-14.9-27.5-22-40.5c-6.8-12.5-13.3-24.5-19.7-36.2c-7.1 13.2-14.2 26.5-21.5 40.1c-18.7-6.9-33.1-18-38.9-35.7c-5.4-16.7-3.3-39.4 10.1-70"/><path fill="#f58120" fill-rule="evenodd" d="M226.6 42.3c-48.7 14.1-81.3 33.1-103.1 54c-19.7 18.3-33.5 42.1-39.5 68.4l-33.1 11c7.1 7.7 14.5 15.6 22.1 23.7c7.9 8.4 16.1 17.1 24.5 26.1c11.5-15.2 22.8-30.1 34-44.8c11-14.3 21.8-28.6 32.3-42.6c-13.1 4.3-26.1 8.6-39 12.8c5.2-21.3 15.5-41 29.9-57.4c15.6-17.8 38.5-35.2 71.9-51.2"/>`;
</script>.ace-stream {
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%20512%20512%22%3E%3Cpath%20fill%3D%22%23f15e4b%22%20fill-rule%3D%22evenodd%22%20d%3D%22M430.5%2049.9c-37.4-23.2-73.7-26.5-106.6-19.5c-31.6%206.7-62%2023.5-87.8%2043.4c-6.7-4.3-13.1-8.6-19.5-12.7c-5.8%2012.6-11.7%2025.5-17.8%2038.6c-6.1%2013.4-12.4%2027.1-18.7%2041c16.9-5.5%2034-11%2051.6-16.7l54.5-17.6l-25.1-16.3c23.1-16.6%2048.5-30.6%2075.7-38.6c30.5-8.9%2062.9-9.5%2093.7-1.7z%22%2F%3E%3Cpath%20fill%3D%22%238a5da7%22%20fill-rule%3D%22evenodd%22%20d%3D%22M490.8%20258.3c29-62.5%2025.6-103.5%205.6-128.8c-18.6-23.6-51.5-33.8-86.3-35.6q7.35-16.5%2014.4-32.4L367%2088.3l-55.7%2026.1c9.6%209.1%2019.6%2018.6%2029.9%2028.4l33.4%2031.7c5.9-13.4%2011.7-26.7%2017.4-39.7c28.5%204%2054.9%2013.2%2073.5%2031.2c19.6%2019.2%2030.5%2048.5%2025.3%2092.5z%22%2F%3E%3Cpath%20fill%3D%22%234a8da0%22%20fill-rule%3D%22evenodd%22%20d%3D%22M242.8%20484.8c76.2-14.2%20126.4-48%20154.8-88.6c12.2-17.3%2020.8-36.9%2025.2-57.6s4.5-42.2.3-62.9c17.5-5.8%2035-11.8%2052.9-17.9c-19.8-10.8-38.8-21.3-56.9-31.4c-17.3-9.4-34-18.5-50-27.2c-9.4%2018.2-19%2036.8-28.8%2055.9c-9.9%2019.4-20.1%2039.3-30.4%2059.6c17.5-6%2035.1-12.1%2053.1-18.3c2.7%2034.1-4.6%2068.3-21%2098.4c-18.6%2033.8-50.3%2065.5-99.2%2090%22%2F%3E%3Cpath%20fill%3D%22%2326a75a%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.5%20394.2c19.6%2042.9%2050.7%2061.4%2086.2%2062.4c37.4%201%2077.6-17.4%20112.7-43.7c9.4%2010.4%2019.1%2021%2029.1%2032c7.6-22.3%2015.1-44%2022.4-65.1c7.1-20.4%2014.1-40.4%2020.8-59.9c-22.9%205.2-45.3%2010.2-67.1%2015.1l-63%2014.3c8.6%209.3%2017.3%2019%2026.4%2028.9c-28.8%2019.7-59%2034.4-88.7%2038.3c-28.7%203.9-55.9-2.2-78.9-22.4v.1z%22%2F%3E%3Cpath%20fill%3D%22%23fec827%22%20fill-rule%3D%22evenodd%22%20d%3D%22M38.9%20189C8.6%20233.5-2%20266.7.3%20291c2.4%2025.7%2019.5%2041.6%2042.8%2049.6c-7%2013.3-14.3%2026.7-21.6%2040.3c17.7-8%2035.7-16.2%2053.8-24.4c18.3-8.2%2036.9-16.7%2055.6-25.2c-7.6-14-14.9-27.5-22-40.5c-6.8-12.5-13.3-24.5-19.7-36.2c-7.1%2013.2-14.2%2026.5-21.5%2040.1c-18.7-6.9-33.1-18-38.9-35.7c-5.4-16.7-3.3-39.4%2010.1-70%22%2F%3E%3Cpath%20fill%3D%22%23f58120%22%20fill-rule%3D%22evenodd%22%20d%3D%22M226.6%2042.3c-48.7%2014.1-81.3%2033.1-103.1%2054c-19.7%2018.3-33.5%2042.1-39.5%2068.4l-33.1%2011c7.1%207.7%2014.5%2015.6%2022.1%2023.7c7.9%208.4%2016.1%2017.1%2024.5%2026.1c11.5-15.2%2022.8-30.1%2034-44.8c11-14.3%2021.8-28.6%2032.3-42.6c-13.1%204.3-26.1%208.6-39%2012.8c5.2-21.3%2015.5-41%2029.9-57.4c15.6-17.8%2038.5-35.2%2071.9-51.2%22%2F%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%20512%20512%22%3E%3Cpath%20fill%3D%22%23f15e4b%22%20fill-rule%3D%22evenodd%22%20d%3D%22M430.5%2049.9c-37.4-23.2-73.7-26.5-106.6-19.5c-31.6%206.7-62%2023.5-87.8%2043.4c-6.7-4.3-13.1-8.6-19.5-12.7c-5.8%2012.6-11.7%2025.5-17.8%2038.6c-6.1%2013.4-12.4%2027.1-18.7%2041c16.9-5.5%2034-11%2051.6-16.7l54.5-17.6l-25.1-16.3c23.1-16.6%2048.5-30.6%2075.7-38.6c30.5-8.9%2062.9-9.5%2093.7-1.7z%22%2F%3E%3Cpath%20fill%3D%22%238a5da7%22%20fill-rule%3D%22evenodd%22%20d%3D%22M490.8%20258.3c29-62.5%2025.6-103.5%205.6-128.8c-18.6-23.6-51.5-33.8-86.3-35.6q7.35-16.5%2014.4-32.4L367%2088.3l-55.7%2026.1c9.6%209.1%2019.6%2018.6%2029.9%2028.4l33.4%2031.7c5.9-13.4%2011.7-26.7%2017.4-39.7c28.5%204%2054.9%2013.2%2073.5%2031.2c19.6%2019.2%2030.5%2048.5%2025.3%2092.5z%22%2F%3E%3Cpath%20fill%3D%22%234a8da0%22%20fill-rule%3D%22evenodd%22%20d%3D%22M242.8%20484.8c76.2-14.2%20126.4-48%20154.8-88.6c12.2-17.3%2020.8-36.9%2025.2-57.6s4.5-42.2.3-62.9c17.5-5.8%2035-11.8%2052.9-17.9c-19.8-10.8-38.8-21.3-56.9-31.4c-17.3-9.4-34-18.5-50-27.2c-9.4%2018.2-19%2036.8-28.8%2055.9c-9.9%2019.4-20.1%2039.3-30.4%2059.6c17.5-6%2035.1-12.1%2053.1-18.3c2.7%2034.1-4.6%2068.3-21%2098.4c-18.6%2033.8-50.3%2065.5-99.2%2090%22%2F%3E%3Cpath%20fill%3D%22%2326a75a%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.5%20394.2c19.6%2042.9%2050.7%2061.4%2086.2%2062.4c37.4%201%2077.6-17.4%20112.7-43.7c9.4%2010.4%2019.1%2021%2029.1%2032c7.6-22.3%2015.1-44%2022.4-65.1c7.1-20.4%2014.1-40.4%2020.8-59.9c-22.9%205.2-45.3%2010.2-67.1%2015.1l-63%2014.3c8.6%209.3%2017.3%2019%2026.4%2028.9c-28.8%2019.7-59%2034.4-88.7%2038.3c-28.7%203.9-55.9-2.2-78.9-22.4v.1z%22%2F%3E%3Cpath%20fill%3D%22%23fec827%22%20fill-rule%3D%22evenodd%22%20d%3D%22M38.9%20189C8.6%20233.5-2%20266.7.3%20291c2.4%2025.7%2019.5%2041.6%2042.8%2049.6c-7%2013.3-14.3%2026.7-21.6%2040.3c17.7-8%2035.7-16.2%2053.8-24.4c18.3-8.2%2036.9-16.7%2055.6-25.2c-7.6-14-14.9-27.5-22-40.5c-6.8-12.5-13.3-24.5-19.7-36.2c-7.1%2013.2-14.2%2026.5-21.5%2040.1c-18.7-6.9-33.1-18-38.9-35.7c-5.4-16.7-3.3-39.4%2010.1-70%22%2F%3E%3Cpath%20fill%3D%22%23f58120%22%20fill-rule%3D%22evenodd%22%20d%3D%22M226.6%2042.3c-48.7%2014.1-81.3%2033.1-103.1%2054c-19.7%2018.3-33.5%2042.1-39.5%2068.4l-33.1%2011c7.1%207.7%2014.5%2015.6%2022.1%2023.7c7.9%208.4%2016.1%2017.1%2024.5%2026.1c11.5-15.2%2022.8-30.1%2034-44.8c11-14.3%2021.8-28.6%2032.3-42.6c-13.1%204.3-26.1%208.6-39%2012.8c5.2-21.3%2015.5-41%2029.9-57.4c15.6-17.8%2038.5-35.2%2071.9-51.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
透明度往复渐变,适合状态提示与在线指示。
.icon-ace-stream {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转,适合加载中场景。
.icon-ace-stream {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
1.98 KB
2,026 字节
viewBox
0 0 512 512
矢量坐标系
图元总数
6
<path> ×6
风格
多色填充
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 1.98 KB(2,026 字节),图元 6 个,风格为多色填充。
关于 ace-stream 图标的下载、商用与改色。
它是 selfh.st/icons(selfhst)开源图标集中的 ace-stream 图标,多色填充,viewBox 为 0 0 512 512,文件仅 1.98 KB,矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
该图标采用 CC BY 4.0(CC-BY-4.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。