Skip to content

图标组件 svg-icon

图片

图标组件支持以下功能:

  • 显示本地assets/svg-icon文件夹下的svg图标
  • 显示iconify中的图标

Props

名称类型默认值说明
localIconstringundefined要显示的本地assets/svg-icon文件夹下的svg图标的文件名
以下属性只针对iconify图标有效
iconstringundefined图标名,常用的图标建议定义为常量,在src/constants/icons.ts中定义了内置页面常用的一些图标。
inlinebooleanfalse影响垂直对齐
widthstring | numberundefined图标宽度
heightstring | numberundefined图标高度
horizontalFlipbooleanfalse水平翻转
verticalFlipbooleanfalse垂直翻转
rotatestring | numberundefined旋转
colorstringundefined颜色

示例代码

vue
<jb-icon icon="ph:user-fill" color="red"></jb-icon>
<jb-icon icon="ph:user-fill" color="red"></jb-icon>

本地图标是完全由原生svg渲染,所以可以通过css的方式来修改图标的样式,比如颜色、大小等。

vue
<jb-icon local-icon="avatar" class="text-30px" ></jb-icon>
<jb-icon local-icon="avatar" class="text-30px" ></jb-icon>