common-ui/docs/components/icon/base.md

CommonIcon 公共ICON

基础用法

:::demo

<template>
  <common-icon  name="common-bianyuanwangguan" content="我是toolTip" :size="18" @click.stop="handelClick"></common-icon>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();


function handelClick() {
  proxy.$message(`$dianj`)
}

</script>

:::

:::demo

<template>
  <div class="icon-demo">
    <div v-for="(item, index) in allIcons" :key="index" class="icon-container">
      <h5 class="common-title">{{ item.label }}</h5>
      <div class="icon-list">
          <div class="card" @click.stop="getSvgName(icon)" v-for="icon in item.icons" :key="icon">
            <common-icon class="icon" :name="icon" :size="30"></common-icon>
            <span style="width: 80px" class="text-line-3">{{ icon }}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
// import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();

const common = import.meta.globEager(
  '../../../packages/assets/icons/common/*.svg'
);

const tool = import.meta.globEager('../../../packages/assets/icons/tool/*.svg');
const commonKeys = Object.keys(common);
const toolKeys = Object.keys(tool);

const commons = ref([]);
const tools = ref([]);

function getName(keys, file, target) {
  keys.forEach((item) => {
    const name = item
      .split(`../../packages/assets/icons/${file}/`)[1]
      .split('.')[0];
    target.push(`${file}-${name}`);
  });
}


getName(commonKeys, 'common', commons.value);
getName(toolKeys, 'tool', tools.value);

const allIcons = ref([
  { label: '公共icon', icons: commons },
  { label: '工具类icon', icons: tools }
]);

function getSvgName(name) {
  const text = `<common-icon name="${name}" :size="18"></common-icon>`;
  proxy.$copyText(text).then(() => {
    console.log(text);
    proxy.$message(`${name} 复制成功`)
  });
}
</script>

:::

配置参数

参数	说明	类型	是否必须
name	icon名称，目前分为'common-'和'tool-'	String	true
size	icon的大小，如果不传，默认为18	Number	true
content	icon hover上去时的tooltip展示，不传默认为没有	String	true
color	图标展示的颜色，所有svg图片默认为currentColor，如果不传为’#333‘,如果传即为设定颜色，彩色图片不在此列	String	true
effect	tool-tip背景色，默认为’dark‘具体使用方法参考element-plus的el-tooltip组件	String	true
placement	tool-tip显示位置，默认为’top-start‘具体使用方法参考element-plus的el-tooltip组件	String	true