引入icon的几种方式

icon使用

<el-icon>
      <Edit></Edit>
    </el-icon>

    <icon-ep-edit></icon-ep-edit>

    <svg-icon icon="virtual:svg-icons-register"></svg-icon>
    <svg-icon icon="ep:edit"></svg-icon>

    <svg-icon iconClass="edit"></svg-icon>

    <icon-ad-account-book-twotone></icon-ad-account-book-twotone>

    <el-button icon="edit"></el-button>

    <el-button>
      <icon-ad-account-book-twotone></icon-ad-account-book-twotone>
      button
    </el-button>

本文在ryplus中测试,使用elementplus + vite , 以下内容主要使用也是ep icon;

ep直接引入

按需引入

import { Edit } from '@element-plus/icons-vue';
// 使用
 <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
  <Edit />

全局注册

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 以下是抽离注册逻辑
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { App } from 'vue';
export default {
  install: (app: App) => {
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component);
    }
  }
};
// main.js
import ElementIcons from '@/plugins/svgicon';
app.use(ElementIcons);
// 使用
 <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
  <Edit />

使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集您可以参考此模板。

图标仓库: https://icones.js.org/

// vite.config.ts  plugin 中代码

import IconsResolver from 'unplugin-icons/resolver';

     IconsResolver({
        // 修改Icon组件前缀，不设置则默认为i,禁用则设置为false
        prefix: 'icon',
        // 指定collection，即指定为elementplus图标集ep
        enabledCollections: ['ep','ant-design'],
        alias: { ad: 'ant-design' } //集合的别名 别名顺序有点意思
      })

使用

// 使用1 使用iconify/vue 组件引入
import { Icon } from '@iconify/vue';
<icon icon="ep:edit"></icon>
// 使用2 也可使用注册时指定的规则进行引入
<icon-ad-account-book-twotone></icon-ad-account-book-twotone>

  <icon-ep-edit></icon-ep-edit>

为了使用方便,可引用下面组件,可以使用本地和线上的图标

<!--<template>
  <template v-if="renderLocalIcon">
    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
      <use :xlink:href="symbolId" fill="currentColor" />
    </svg>
  </template>
  <template v-else>
    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
  </template>
</template>-->



<template>
    <template v-if="renderLocalIcon">
      <svg :class="svgClass" aria-hidden="true"  v-bind="bindAttrs">
        <use :xlink:href="iconName" :fill="color||'currentColor'" />
      </svg>
    </template>
    <template v-else>
      <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
    </template>


</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { Icon } from '@iconify/vue';

const props = defineProps({
  // iconClass: propTypes.string.isRequired,
  iconClass: propTypes.string.def(''), // local svgIcon
  icon: propTypes.string.def(''),  //icon
  className: propTypes.string.def(''),
  color: propTypes.string.def('')
});
const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return 'svg-icon';
});

const renderLocalIcon = computed(() => props.iconClass || !props.icon);


const attrs = useAttrs();
const bindAttrs = computed<{ class: string; style: string }>(() => ({
  class: (attrs.class as string) || '',
  style: (attrs.style as string) || ''
}));

</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

本地svg引入

// vite.config.ts  plugin 中注册插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
export default (path: any, isBuild: boolean) => {
  return createSvgIconsPlugin({
    // 指定需要缓存的图标文件夹
    iconDirs: [path.resolve(path.resolve(__dirname, '../../src'), 'assets/icons/svg')],
    // 指定symbolId格式
    symbolId: 'icon-[dir]-[name]',
    svgoOptions: isBuild
  });
};
// 使用请看 前文  svgicon 组件

阿里巴巴icon站引入