SmartPortal images

适用于对图片进行个性化处理

Vue3版本使用

依赖安装

组件包依赖

npm install @smart-portal/images

方式一：全量图片全局注册

main入口主文件引入依赖

import * as SmartPortalIcon from '@smart-portal/images'

// SmartPortal图标
for (const [key, component] of Object.entries(SmartPortalIcon)) {
  app.component(key, component)
}

组件内直接使用

/**
 * 组件格式：
 * <SmartPortalIconX />
 * X：图片名，详见文档
 */
<template>
  <div>
    <SmartPortalIconAsp width="100px" height="100px" fit="fill" />
  </div>
</template>

方式二：组件内按需引入使用

<template>
  <div>
    <SmartPortalIconAsp width="100px" height="100px" fit="fill" />
  </div>
</template>

<script lang="ts" setup>
import { SmartPortalIconAsp } from '@smart-portal/images'
</script>

Vue2.x版本使用

依赖于bundler

npm install @smart-portal/bundler

入口主文件引入依赖

import { IconComponentInstall } from '@smart-portal/bundler'

Vue.use(IconComponentInstall)

组件内直接使用，icon为图标名，type为图片格式

<template>
  <div>
    <SmartPortalIcon icon="asp" width="100px" height="100px" fit="fill" type="png" />
  </div>
</template>