plane-sharp-fill SVG 图标
keyline-iconsplane-sharp-fill
来自 Keyline Icons 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。
- 图标 ID
- keyline-icons:plane-sharp-fill
- 中文名
- —
- 所属集合
- Keyline Icons
- 集合规模
- 13,232 枚
- 基础网格
- 24px
- 色彩
- 单色(可改色)
- 开源协议
- MIT
- 作者
- Keyline Icons
keyline-iconsplane-sharp-fill
来自 Keyline 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 24 24"><path fill="currentColor" d="M12.1425 5.8306L16.1972 2.8852C17.8838 1.6599 19.915 1.0001 21.9998 1.0001C22.5523 1.0001 23 1.4478 23 2.0001C23 4.045 22.3249 6.0328 21.0796 7.6548L18.052 11.5978L20.179 20.0419C20.1991 20.1218 20.2093 20.2038 20.2093 20.2862C20.2093 20.5824 20.078 20.8633 19.8508 21.0533L17.8037 22.7652C17.6238 22.9157 17.3967 22.9981 17.1622 22.9981C16.8731 22.9981 16.5982 22.873 16.4083 22.655L11.3425 16.8414L8.9161 18.5746L8.4156 21.4938C8.3333 21.9739 7.9171 22.3248 7.43 22.3248C7.1711 22.3248 6.9223 22.2244 6.7359 22.0447L1.9369 17.418C1.7414 17.2295 1.631 16.9697 1.631 16.6981C1.631 16.224 1.9639 15.8151 2.4281 15.7189L5.4086 15.1013L7.1014 12.6849L1.3673 7.9749C1.136 7.785 1.002 7.5015 1.002 7.2022C1.002 6.9614 1.0889 6.7287 1.2466 6.5469L2.9813 4.5474C3.1713 4.3285 3.4469 4.2027 3.7367 4.2027C3.8012 4.2027 3.8656 4.2089 3.929 4.2214L12.1425 5.8306Z"/></svg>export function PlaneSharpFillIcon(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: `<path fill="currentColor" d="M12.1425 5.8306L16.1972 2.8852C17.8838 1.6599 19.915 1.0001 21.9998 1.0001C22.5523 1.0001 23 1.4478 23 2.0001C23 4.045 22.3249 6.0328 21.0796 7.6548L18.052 11.5978L20.179 20.0419C20.1991 20.1218 20.2093 20.2038 20.2093 20.2862C20.2093 20.5824 20.078 20.8633 19.8508 21.0533L17.8037 22.7652C17.6238 22.9157 17.3967 22.9981 17.1622 22.9981C16.8731 22.9981 16.5982 22.873 16.4083 22.655L11.3425 16.8414L8.9161 18.5746L8.4156 21.4938C8.3333 21.9739 7.9171 22.3248 7.43 22.3248C7.1711 22.3248 6.9223 22.2244 6.7359 22.0447L1.9369 17.418C1.7414 17.2295 1.631 16.9697 1.631 16.6981C1.631 16.224 1.9639 15.8151 2.4281 15.7189L5.4086 15.1013L7.1014 12.6849L1.3673 7.9749C1.136 7.785 1.002 7.5015 1.002 7.2022C1.002 6.9614 1.0889 6.7287 1.2466 6.5469L2.9813 4.5474C3.1713 4.3285 3.4469 4.2027 3.7367 4.2027C3.8012 4.2027 3.8656 4.2089 3.929 4.2214L12.1425 5.8306Z"/>` }}
/>
);
}<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 = `<path fill="currentColor" d="M12.1425 5.8306L16.1972 2.8852C17.8838 1.6599 19.915 1.0001 21.9998 1.0001C22.5523 1.0001 23 1.4478 23 2.0001C23 4.045 22.3249 6.0328 21.0796 7.6548L18.052 11.5978L20.179 20.0419C20.1991 20.1218 20.2093 20.2038 20.2093 20.2862C20.2093 20.5824 20.078 20.8633 19.8508 21.0533L17.8037 22.7652C17.6238 22.9157 17.3967 22.9981 17.1622 22.9981C16.8731 22.9981 16.5982 22.873 16.4083 22.655L11.3425 16.8414L8.9161 18.5746L8.4156 21.4938C8.3333 21.9739 7.9171 22.3248 7.43 22.3248C7.1711 22.3248 6.9223 22.2244 6.7359 22.0447L1.9369 17.418C1.7414 17.2295 1.631 16.9697 1.631 16.6981C1.631 16.224 1.9639 15.8151 2.4281 15.7189L5.4086 15.1013L7.1014 12.6849L1.3673 7.9749C1.136 7.785 1.002 7.5015 1.002 7.2022C1.002 6.9614 1.0889 6.7287 1.2466 6.5469L2.9813 4.5474C3.1713 4.3285 3.4469 4.2027 3.7367 4.2027C3.8012 4.2027 3.8656 4.2089 3.929 4.2214L12.1425 5.8306Z"/>`;
</script>.plane-sharp-fill {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.1425%205.8306L16.1972%202.8852C17.8838%201.6599%2019.915%201.0001%2021.9998%201.0001C22.5523%201.0001%2023%201.4478%2023%202.0001C23%204.045%2022.3249%206.0328%2021.0796%207.6548L18.052%2011.5978L20.179%2020.0419C20.1991%2020.1218%2020.2093%2020.2038%2020.2093%2020.2862C20.2093%2020.5824%2020.078%2020.8633%2019.8508%2021.0533L17.8037%2022.7652C17.6238%2022.9157%2017.3967%2022.9981%2017.1622%2022.9981C16.8731%2022.9981%2016.5982%2022.873%2016.4083%2022.655L11.3425%2016.8414L8.9161%2018.5746L8.4156%2021.4938C8.3333%2021.9739%207.9171%2022.3248%207.43%2022.3248C7.1711%2022.3248%206.9223%2022.2244%206.7359%2022.0447L1.9369%2017.418C1.7414%2017.2295%201.631%2016.9697%201.631%2016.6981C1.631%2016.224%201.9639%2015.8151%202.4281%2015.7189L5.4086%2015.1013L7.1014%2012.6849L1.3673%207.9749C1.136%207.785%201.002%207.5015%201.002%207.2022C1.002%206.9614%201.0889%206.7287%201.2466%206.5469L2.9813%204.5474C3.1713%204.3285%203.4469%204.2027%203.7367%204.2027C3.8012%204.2027%203.8656%204.2089%203.929%204.2214L12.1425%205.8306Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.1425%205.8306L16.1972%202.8852C17.8838%201.6599%2019.915%201.0001%2021.9998%201.0001C22.5523%201.0001%2023%201.4478%2023%202.0001C23%204.045%2022.3249%206.0328%2021.0796%207.6548L18.052%2011.5978L20.179%2020.0419C20.1991%2020.1218%2020.2093%2020.2038%2020.2093%2020.2862C20.2093%2020.5824%2020.078%2020.8633%2019.8508%2021.0533L17.8037%2022.7652C17.6238%2022.9157%2017.3967%2022.9981%2017.1622%2022.9981C16.8731%2022.9981%2016.5982%2022.873%2016.4083%2022.655L11.3425%2016.8414L8.9161%2018.5746L8.4156%2021.4938C8.3333%2021.9739%207.9171%2022.3248%207.43%2022.3248C7.1711%2022.3248%206.9223%2022.2244%206.7359%2022.0447L1.9369%2017.418C1.7414%2017.2295%201.631%2016.9697%201.631%2016.6981C1.631%2016.224%201.9639%2015.8151%202.4281%2015.7189L5.4086%2015.1013L7.1014%2012.6849L1.3673%207.9749C1.136%207.785%201.002%207.5015%201.002%207.2022C1.002%206.9614%201.0889%206.7287%201.2466%206.5469L2.9813%204.5474C3.1713%204.3285%203.4469%204.2027%203.7367%204.2027C3.8012%204.2027%203.8656%204.2089%203.929%204.2214L12.1425%205.8306Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
透明度往复渐变,适合状态提示与在线指示。
.icon-plane-sharp-fill {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}匀速循环旋转,适合加载中场景。
.icon-plane-sharp-fill {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
0.95 KB
976 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
1
<path> ×1
风格
单色(跟随 currentColor)
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 0.95 KB(976 字节),图元 1 个,风格为单色(跟随 currentColor)。
关于 plane-sharp-fill 图标的下载、商用与改色。
它是 Keyline Icons(keyline-icons)开源图标集中的 plane-sharp-fill 图标,单色(跟随 currentColor),viewBox 为 0 0 24 24,文件仅 0.95 KB,矢量格式可无损缩放到任意尺寸。
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
该图标采用 MIT(MIT) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。