elementPlus svg-icon和icon组件最完整使用

elementPlus改变了icon的使用规则，按官方的意思来说，按新的设计模式不会在出现icon丢失。设计场景更灵活。也确实如此。新版的字体颜色只需要传第color就可以了。不在需要重写style

element plus 引入 icon有3种，直接引入，vite按需引入，全量引入

直接引入比较直观，import引入然后使用，顾名思义正常使用组件

  // 直接引入
  <el-icon color="#409EFC" class="no-inherit">
      <Edit />
  </el-icon>

  import { Edit } from '@element-plus/icons-vue';

按序引入官方也提供的相对应的示例
1.使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。
2.最初是在element-plus icon这里看见有自动引入的，但是使用起来一直没效果，百度查看到这个文章看到完整用例。
3.下载vite的插件 npm i unplugin-vue-components unplugin-icons unplugin-auto-import -D

// vite.config.ts集成icon的配置

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
// ...
plugins: [
   //...

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
    }),

    Icons({
      autoInstall: true,
    }),

    Inspect(),
  ]

然后在代码里使用按这样的格式
<i-ep-edit />
同样也可以
  <el-icon class="is-loading">
    <i-ep-edit />
  </el-icon>

全量引入就是在main.ts循环声明

//main.ts文件
import * as ElIconModules from '@element-plus/icons'

const app = createApp(App)
// 统一注册Icon图标
for (const iconName in ElIconModules) {
  if (Reflect.has(ElIconModules, iconName)) {
    const item = ElIconModules[iconName]
    app.component(iconName, item)
  }
}

// 页面内容直接官网示例直接使用
  <el-icon color="#409EFC" class="no-inherit">
      <Edit />
  </el-icon>

svg使用其实跟vue2的场景差不多，封装一个svg-icon组件，然后main.ts引入iconfont里面生成的文件js文件

先封装svgIcon组件，因为vue3的架构基本是集成了AutoImport和Components所以不需要主动引入

<template>
    <svg :class="classList" aria-hidden="true">
        <use :xlink:href="iconName" :fill="color"/>
    </svg>
</template>

<script setup>

const props = defineProps({
    className: { type: String, default: '', },
    iconClass: { type: String, required: true, },
    color: { type: String, default: '#409eff', },
    size: { type: String, default: '20px', },
})
const classList = computed(() => {
    return ['icon', props.className || '']
})
const iconName = computed(() => {
    return `#${props.iconClass}`
})
</script>
<style scoped>
.icon {
    /* v-bind是Vue3才支持的功能，可以将CSS的值与js的值绑定 */
    width: v-bind('props.size');
    height: v-bind('props.size');
    position: relative;
    vertical-align: -2px;
    fill: currentColor;
}
</style>

然后把文件按步骤下载到本地 图一。把iconfont.js放到本地资源文件夹，我的存放路径是import '@/assets/font/iconfont.js'; 具体请看图二

iconfont资源.png 文件存放地址.png

以下是vue3.2jsx动态语法，如果需要了解jsx的动态使用请跳转vue3.2 JSX语法使用

// 使用情况，如上图1 置顶图标下面描述叫iconzhiding。

<script lang="jsx">

export default {
    name: "MenuItem",
    functional: true,
    props: {
        icon: { type: String, default: "", },
        title: { type: String, default: "", },
    },
    render(props, context) {
        const { icon, title } = props
        // return (<span className="tw_cl" slot="title"><svg-icon class="mr5" icon-class={icon} />{title}</span>);
        return (<span className="tw_cl" slot="title"><svg-icon class="mr5" icon-class="iconzhiding" />{title}</span>);
    },
};
</script>

<style scoped>
.sub-el-icon {
    color: currentColor;
    width: 1em;
    height: 1em;
}
</style>

如想看更详细代码或想学习vite和vue3.2+请移步： tw-vue-vite: 一个基于vue3.2（全家桶）+ vite + elementplus的系统集成架构 (gitee.com)