UI组件前端【免费下载链接】ioniconsPremium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 项目地址https://gitcode.com/gh_mirrors/io/ionicons点击查看免费下载导读ion-icon是 Ionicons 图标库提供的核心 Web ComponentWeb 组件它以ion-icon自定义元素的形式让开发者可以在任意 Web 应用中动态、按需地加载 SVG 图标而无需把全部 1300 余个图标文件打包进应用。本文以 src/components/icon/readme.md 中的属性Properties文档为主线结合仓库内 icon.tsx 等源码实现与测试用例系统讲解ion-icon的全部公开属性、图标加载与缓存机制、RTL 适配、SVG 安全校验等底层原理帮助你真正掌握这一图标组件的完整用法与性能调优点。ion-icon是什么一个 Shadow DOM 内的 SVG 加载器ion-icon由 StencilJS 编译产出在 icon.tsx 中以Component装饰器声明了三个关键特征tag: ion-icon—— 自定义元素的标签名shadow: true—— 组件启用 Shadow DOM内部结构与样式与外界隔离assetsDirs: [svg]—— 打包时把src/svg目录下的内置 SVG 图标作为资产复制到产物中供运行时按名拉取。也就是说ion-icon本身不内联任何图标数据它只是一个按需加载 SVG 的容器组件挂载后根据传入的属性解析出图标 URL通过fetch动态拉取 SVG 字符串并注入到 Shadow DOM 内部的.icon-inner节点见 icon.tsx。这正是根目录 readme.md 所说的你的应用只会请求真正用到的图标。属性总览Properties以下表格完整来自 src/components/icon/readme.md列出ion-icon的全部公开属性Property为 JS 属性名Attribute为在 HTML 中使用的写法PropertyAttributeDescriptionTypeDefaultcolorcolorThe color to use for the background of the item.string \| undefinedundefinedflipRtlflip-rtlSpecifies whether the icon should horizontally flip whendirisrtl.boolean \| undefinedundefinediconiconA combination of bothnameandsrc. If asrcurl is detected it will set thesrcproperty. Otherwise it assumes its a built-in named SVG and set thenameproperty.anyundefinediosiosSpecifies which icon to use oniosmode.string \| undefinedundefinedlazylazyIf enabled, ion-icon will be loaded lazily when its visible in the viewport. Default,false.booleanfalsemdmdSpecifies which icon to use onmdmode.string \| undefinedundefinedmodemodeThe mode determines which platform styles to use.stringgetIonMode()namenameSpecifies which icon to use from the built-in set of icons.string \| undefinedundefinedsanitizesanitizeWhen set tofalse, SVG content that is HTTP fetched will not be checked if the response SVG content has anyscriptelements, or any attributes that start withon, such asonclick.booleantruesizesizeThe size of the icon. Available options are:smallandlarge.string \| undefinedundefinedsrcsrcSpecifies the exactsrcof an SVG file to use.string \| undefinedundefined其中mode的默认值getIonMode()在 icon.tsx 中实现读取html根元素上的mode属性若未设置则回退为md。lazy与sanitize的默认值则直接由 StencilProp的字段初始化给出见 icon.tsx 与 icon.tsx。核心属性逐项详解name与src两种图标来源name使用内置图标集name值必须与src/svg目录下的 SVG 文件名一致不含扩展名例如ion-icon nameheart/ion-icon。源码层面utils.ts 中的getUrl()会优先走src其次才解析name并通过getNamedUrl拼出svg/{name}.svg资产路径。src指定一个外部 SVG 文件的精确 URL行为与img src...一致要求该 URL 可从发起请求的网页访问且文件必须是合法的 SVG——不允许包含script元素或on*事件属性见根 readme.md 的 Custom icons 章节。从源码看URL 的识别规则在isSrc()utils.ts只要字符串包含/或.就判定为src类型 URL否则视为图标名称。iconname与src的统一入口icon属性是二者的合体传入的字符串若被识别为 URL含/或.则作为src使用否则作为内置图标名name。它还能接收更复杂的形式——getUrl()utils.ts会依次尝试icon.src、icon[mode]即允许传入一个带src或按平台分组的图标对象。ios、md与mode平台差异化图标在 Ionic Framework 场景下不同平台应展示不同风格的图标。mode决定当前生效的平台样式默认取文档根元素的mode属性。ios与md则分别指定 iOS / Material 模式下的图标名。在 utils.ts 的getName()中解析优先级是mode ios时取ios属性否则取md属性两者都未传时才回退到name/icon里的名称。典型用法ion-icon iosheart-outline mdheart-sharp/ion-icon图标名在解析时会被统一toLowerCase()并且只允许字母、数字与连字符其余字符一律视为非法并返回nullutils.ts这一点有 utils.spec.ts 的getName用例直接验证。lazy视口可见时才加载lazy默认为false。开启后组件会借助浏览器原生IntersectionObserver等到图标元素进入视口且预留 50px 的rootMargin才真正发起 SVG 请求不支持该 API 的浏览器或服务端渲染环境下会自动回退为立即加载见 icon.tsx。结合根 readme.md 的说明这意味着折叠区以下不可见的图标不会产生网络请求是列表型页面性能优化的关键开关。组件生命周期对加载时机也有精细处理connectedCallback中触发等待可见再加载而componentDidLoad专门补救了 Angular 绑定语法[name]...在 watcher 注册前赋值的问题icon.tsx。flipRtl与sanitize行为类开关flipRtl声明图标在dirrtl环境下是否水平翻转。更巧妙的是源码对名称包含arrow或chevron的图标做了自动翻转除非显式传flipRtl{false}关闭因为前进/后退的方向语义在 LTR 与 RTL 布局中正好相反见 icon.tsx。sanitize默认true即对所有通过 HTTPfetch获取的 SVG 内容执行安全校验设置为false则跳过该校验。具体校验逻辑见下文安全模型章节。安全模型sanitize背后的三层校验validate.ts 是sanitize属性的源码实现包含三个函数validateContent()先把 SVG 字符串塞进一个临时div从后往前移除所有非svg根元素强制只能有一个根svg并为其追加s-ion-icon类名isValid()递归遍历节点树只要遇到script元素不区分大小写或任何属性名以on开头如onclick、onload的节点立即判定为非法isSvgDataUrl()/isEncodedDataUrl()识别data:image/svgxml形式的 data URL。这些规则在 validate.spec.ts 中有完整用例覆盖onload、OnClIcK大小写混合、子节点中的SCRIPT元素均被判为无效而普通circle、svg与文本节点则是合法的。换句话说sanitize{false}只应在完全可信的图标来源下使用否则存在注入脚本或事件处理器的风险。加载流程与缓存request.ts的工作机制图标加载由 request.ts 驱动值得关注的设计有三点内容缓存ioniconContent是一个Mapurl, svg同一个 URL 的 SVG 内容只拉取一次。loadIcon()icon.tsx会先查缓存命中则同步取用未命中才异步请求。请求去重requests同样以 URL 为键缓存进行中的fetchPromise多个ion-icon同时引用同一图标时只会发出一个网络请求。优雅降级fetch失败或响应内容为空时safeFallback()会向缓存写入空字符串避免后续重复请求对data:image/svgxml;utf8,...形式的编码 data URL则直接用DOMParser解析在启用 CSP 的场景下依然可用并复用单一的全局 parser 实例以提升效率。整个取 URL 的优先级链条src→name/icon命名 →icon.src→icon[mode]在 utils.spec.ts 的getUrl用例中得到验证。内置图标、自定义图标与addIcons除了从src/svg资产目录按名加载还可以把 SVG 数据内联注册进运行时import { setAssetPath, addIcons } from ionicons; import { add, logoIonic, save } from ionicons/icons; // 指定自定义图标资源根路径例如 root/public/svg setAssetPath(${window.location.origin}/public/svg/); // 只注册需要的图标 addIcons({ add, logoIonic, save });注册后即可继续使用命名方式ion-icon nameheart/ion-icon会从root/public/svg/heart.svg拉取见根 readme.md。addIcons()的实现位于 utils.ts图标表挂在window.Ionicons.map上跨实例共享的CACHED_MAP并且会自动为驼峰命名补充 kebab-case 别名——注册{ logoIonitron }会同时产生logoIonitron与logo-ionitron两个条目。此外同名重复注册同一份数据不会告警但不同数据抢注同一名称会输出console.warn提示utils.spec.ts 的addIcons用例覆盖了这两种行为。尺寸、颜色与描边宽度样式层面的定制ion-icon的默认样式在 icon.css 中定义关键点如下默认尺寸width: 1em; height: 1em;即图标跟随当前字体大小缩放因此直接用 CSS 的font-size即可精确控制尺寸建议使用 8 的整数倍如 8、16、32、64预置档位sizesmall对应1.125remsizelarge对应2remicon-small/icon-large类颜色默认fill: currentColor设置 CSScolor即可着色组件还通过createColorClasses()icon.tsx把color属性映射为ion-color ion-color-{name}类进而套用--ion-color-{primary|secondary|...}主题色变量含各自默认值描边宽度outline 变体可通过 CSS 自定义属性--ionicon-stroke-width调整描边粗细默认值为32px例如ion-icon { --ionicon-stroke-width: 16px; }RTL 支持flip-rtl的三级 CSS 兜底render()中会综合flipRtl、图标名与文档方向算出flip-rtl/icon-rtl类icon.tsx。对应样式在 icon.css 中做了细致的兼容处理Safari 16.4 等 WebKit 浏览器误报支持:dir(rtl)因此用supports (background: -webkit-named-image(i))先套用scaleX(-1)回退既不支持:host-context也不支持:dir的老浏览器通过另一段supports not selector(...)兜底支持:dir(rtl)的浏览器则走:host(.flip-rtl:dir(rtl))规则并额外用:dir(ltr)规则抵消 WebKit 的误翻转。Playwright 端到端测试 icon.e2e.ts 验证了chevron-forward在document.dir rtl时自动翻转、flip-rtl类在切换图标名后动态更新的行为icon.spec.ts 则验证了 RTL 下组件会同时携带md flip-rtl icon-rtl类以及aria-hidden、自定义aria-label等无障碍属性的继承与保留。无障碍与属性继承ion-icon默认在宿主元素上设置roleimg并在componentWillLoad阶段通过inheritAttributes()utils.ts把开发者写在ion-icon上的aria-label等属性摘取并重放icon.spec.ts中的用例证明即便切换了图标源自定义的aria-label依然保留。从源码看组件的完整工作流把以上内容串联起来ion-icon的完整工作流是挂载connectedCallback判断是否启用lazy并等待可见使用IntersectionObserver取址getUrl()按src→name/icon→icon.src→icon[mode]的优先级解析图标地址加载getSvgContent()查内容缓存 → 查请求缓存 →fetch或解析 data URL校验sanitize开启时对响应 SVG 执行validateContent()isValid()的安全过滤渲染把清洗后的 SVG 字符串写入 Shadow DOM 的.icon-inner并按mode、flipRtl、size、color生成对应类名响应变化Watch(name|src|icon|ios|md)监听属性变更并触发重载icon.tsx。这套命名引用 按需 fetch 多级缓存 严格校验的设计正是ion-icon既保持内置 1300 余个图标全部存在于 src/svg 目录又能在运行时保持轻量与安全的原因所在。快速上手在非 Ionic 项目中接入如果你不使用 Ionic Framework此时 Ionicons 已默认打包可在页面/body前引入 loader 脚本启用组件script typemodule srchttps://esm.sh/ioniconslatest/loader/script script nomodule srchttps://esm.sh/ioniconslatest/loader/script将latest替换为具体版本号即可锁定版本。加载完成后ion-icon nameheart/ion-icon即可直接使用详见根 readme.md 的 Installation 章节。小结ion-icon的全部 11 个公开属性color、flipRtl、icon、ios、lazy、md、mode、name、sanitize、size、src背后对应着 icon.tsx、utils.ts、validate.ts、request.ts 与 icon.css 五份源码以及四组针对性测试用例。理解这些实现细节能帮助你在实际项目中做出更合理的取舍何时开启lazy优化首屏性能、何时通过addIcons内联注册图标、何时信任sanitize的默认校验以及如何借助flip-rtl、--ionicon-stroke-width与主题色变量让图标在 RTL 与品牌化场景下表现一致。赞分享UI组件前端【免费下载链接】ioniconsPremium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 项目地址https://gitcode.com/gh_mirrors/io/ionicons点击查看免费下载相关推荐amis Spinner 加载中组件完全指南属性、容器模式与组件树 loading 联动机制amis Spinner 加载中组件完全指南属性、容器模式与组件树 loading 联动机制 导读 Spinner加载中是 amis 前端低代码框架中专门前端低代码UI组件Shoelace sl-icon-button 图标按钮组件完全指南属性、事件与样式定制Shoelace sl icon button 图标按钮组件完全指南属性、事件与样式定制 sl icon button 是 Shoelace 提供的一种纯图标UI组件前端4 个阶段把 wvp-GB28181-pro 跑上生产GB28181 安防监控平台从跑通演示到级联上线4 个阶段把 wvp GB28181 pro 跑上生产GB28181 安防监控平台从跑通演示到级联上线 wvp GB28181 pro 是一款基于 GB281后端音视频前端上一篇Unlock Music免费音频解密工具完整使用指南下一篇终极指南如何用OBS AI背景移除插件告别绿幕实现专业级实时抠像创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考