Skip to content

Icon 图标 ​

查看 sn-icon 的 2.0 版本差异

基础用法 ​

字体图标组件,内置开源图标库 Remix Icon 全量图标,组件加载时自动注册字体。

  • 通过图标名指定要显示的图标
  • 图标大小与颜色可配置

根节点默认拍平

sn-icon 根节点默认拍平以提升渲染性能,因此不支持事件与部分样式;需要时请外裹 view,详见 拍平元素不支持的功能或样式。

vue
<template>
	<sn-icon name="home-line"></sn-icon>
</template>

更多演示请下载 demo 查看

属性 ​

参数说明类型默认值可选值
name图标名称(Remix Icon 图标名,不需要前缀)String-参考 Remix Icon
size图标大小,支持 $ 简写String | Number$16-
color图标颜色,支持 $ 功能色简写Stringvar(--sn-text)-
customStyle自定义根节点样式SnStyleValue--
iconClass根节点的外部样式类String--

使用 MIT 协议