MissionPlanner 前端图标方案：Open Iconic v1.1.1 使用指南与源码实践

机器人智能硬件【免费下载链接】MissionPlannerMission Planner Ground Control Station for ArduPilot (c# .net)项目地址https://gitcode.com/gh_mirrors/mi/MissionPlanner点击查看免费下载本文以仓库内置的 Open Iconic v1.1.1 说明文档 为主体结合 MissionPlanner 的 Blazor WebAssembly 前端ExtLibs/wasm中实际引用该图标库的源码系统讲解 223 枚开源图标在 SVG、SVG Sprite、Webfont 三种形态下的引入方式、尺寸与着色技巧以及 Bootstrap / Foundation 框架下的接入方法帮助读者在自有 Web 项目中快速复现 MissionPlanner 前端侧边栏的图标风格。Open Iconic 是一套体积极小、支持 8 像素级清晰渲染的开源图标集由 Iconic 项目衍生而来可直接配合 Bootstrap 与 Foundation 使用。在 MissionPlanner 仓库中它被完整打包进 Blazor WebAssembly 前端ExtLibs/wasm的静态资源目录并已实际应用到页面导航组件中——这正是学习其工程化用法的绝佳范例。Open Iconic 提供了什么根据 README 的清单Open Iconic v1.1.1 包含以下资产223 枚图标设计目标是在小至 8 像素的尺寸下依然清晰可辨legible down to 8 pixels超轻量 SVG 文件整套图标资源合计约 61.8 KBSVG Sprite——作者称之为现代 icon font 的替代方案可用一次请求加载全部图标Webfont 格式EOT、OTF、SVG、TTF、WOFFWebfont 样式表提供面向 Bootstrap 与 Foundation 的专用版本样式源文件覆盖 CSS、LESS、SCSS、Stylus 四种格式PNG 与 WebP 位图内置 8px、16px、24px、32px、48px、64px 六档尺寸。在 MissionPlanner 仓库中实际落盘的文件与文档描述一致。查看 字体资源目录可以看到open-iconic.eot、open-iconic.otf、open-iconic.svg、open-iconic.ttf、open-iconic.woff五种字体文件而 CSS 目录 内保留了压缩后的 Bootstrap 样式表open-iconic-bootstrap.min.css。仓库还附带了 字体许可证 与 图标许可证 两份授权文件。方式一直接使用 SVG 文件Open Iconic 的图标本质就是基础 SVG因此最直接的用法是把 SVG 当作普通图片引入并且文档明确建议不要忘记alt属性以保证可访问性img src/open-iconic/svg/icon-name.svg alticon name在仓库的 wwwroot 静态资源结构中css/open-iconic/之下存放字体与样式图标 SVG 也可按同样的svg/目录约定组织供页面按需引用。方式二使用 SVG Sprite推荐SVG Sprite 让全部图标只需一次网络请求即可使用官方将其定位为像 icon font 一样便利却不是 hack。与普通img不同Sprite 通过use标签按符号 ID 引用图标svg classicon use xlink:hrefopen-iconic.svg#account-login classicon-account-login/use /svg文档给出了两条工程化建议在svg标签上添加通用 class如icon用于统一尺寸控制在use标签上为每个不同图标添加唯一 class如icon-account-login用于单独着色。尺寸控制纯 CSS 完成所有图标均为正方形只需给svg设置相等的宽高即可.icon { width: 16px; height: 16px; }着色控制fill 规则着色更加简单直接在use标签对应的 class 上设置fill.icon-account-login { fill: #f00; }方式三使用 Webfont图标字体Webfont 是传统 icon font 用法文档按集成目标分三种场景给出了完整接入代码。配合 BootstrapBootstrap 专用样式表位于font/css/open-iconic-bootstrap.{css, less, scss, styl}先引入样式link href/open-iconic/font/css/open-iconic-bootstrap.css relstylesheet再以oi oi-前缀的 span 输出图标span classoi oi-icon-name titleicon name aria-hiddentrue/span配合 FoundationFoundation 专用样式表位于font/css/open-iconic-foundation.{css, less, scss, styl}link href/open-iconic/font/css/open-iconic-foundation.css relstylesheet图标类名前缀为fi-span classfi-icon-name titleicon name aria-hiddentrue/span独立使用无框架默认样式表位于font/css/open-iconic.{css, less, scss, styl}link href/open-iconic/font/css/open-iconic.css relstylesheet此时通过data-glyph属性指定图标名span classoi>import url(open-iconic/font/css/open-iconic-bootstrap.min.css);这对应文档配合 Bootstrap场景说明该项目采用oi oi-前缀的写法。导航栏中的图标实例NavMenu.razor 是 wasm 前端的侧边导航组件其中多个导航项使用了 Open Iconic 图标例如span classoi oi-home aria-hiddentrue/span Home以及 WebSocket MP、tlog、DataFlash、filetest、Firmware 等页面入口对应的oi oi-plus、oi oi-list-rich图标且全部带aria-hiddentrue与文档推荐的标记规范一致图标由相邻文字承载语义屏幕阅读器忽略图标本身。图标尺寸的本地化微调site.css 中还针对侧边栏场景对.oi类做了本地化调整正是文档尺寸控制只需基础 CSS思路的工程化体现.sidebar .oi { width: 2rem; font-size: 1.1rem; vertical-align: text-top; top: -2px; }即通过给图标容器设置固定宽度2rem与字号1.1rem并微调垂直对齐使图标在导航菜单中整齐排列。需要调整本项目中的图标大小或对齐方式时仿照这段规则在样式表中覆盖.oi即可。适用范围与注意事项适用前提以上 SVG Sprite 与 Webfont 用法均以 Open Iconic v1.1.1 资产完整存在为前提。在 MissionPlanner 仓库中样式、字体与许可证文件位于 ExtLibs/wasm/wwwroot/css/open-iconic新建页面时可直接复用该目录下的资源无需重新下载。可访问性文档在 SVG 用法中强调alt属性在字体用法中建议aria-hiddentrue与title属性配合项目源码如 NavMenu.razor也遵循了这一约定接入时应保持一致。资源体积整套 SVG 约 61.8 KB、233 枚图标单文件形态体积可观若追求首屏性能优先选择 Sprite 或 Webfont 以减少请求次数。许可证说明根据 README 的 License 章节图标全部代码含 SVG 标记采用 MIT License 授权字体全部字体采用 SIL Open Font License 授权。仓库内亦保留了对应的 ICON-LICENSE 与 FONT-LICENSE 原文商用或二次分发前建议仔细核对授权条款。赞分享机器人智能硬件【免费下载链接】MissionPlannerMission Planner Ground Control Station for ArduPilot (c# .net)项目地址https://gitcode.com/gh_mirrors/mi/MissionPlanner点击查看免费下载相关推荐【亲测免费】 推荐使用Open Iconic v1.1.1 - 超级易读的开放源代码图标库推荐使用Open Iconic v1.1.1 超级易读的开放源代码图标库 在构建现代网页和应用的过程中一套精美且易于使用的图标库是必不可少的元素。今天我向UI库/组件Bootstrap Icons 的 clock-fill 时钟图标源码解析与前端使用指南Bootstrap Icons 的 clock fill 时钟图标源码解析与前端使用指南 Bootstrap Icons即 twbs/icons 仓库为前端openpilot终极安装指南5步快速上手开源驾驶辅助系统openpilot终极安装指南5步快速上手开源驾驶辅助系统 想要为您的爱车升级智能驾驶体验吗openpilot作为开源驾驶辅助系统已经支持300车型让自动驾驶人工智能计算机视觉深度学习机器人上一篇探索高效测试UTPLSQL - PL/SQL 测试框架下一篇如何利用Facebook Python SDK实现内容发布和照片上传完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考