Vue项目中如何使用图标组件库

vue项目中如何使用SVG图标-CSDN博客这是上一个如何使用SVG图标，自由的从图标库下载图标进行增删改等操作固然很方便，但是也暴露出一些小小的不足，那就是任意的图标使用可以造成图标风格的不统一，从而影响整个项目的用户体验。

因为我们在进行图标下载的时候，有可能是从IconFont图标网站上，不同的图标项目库中进行分别的下载，如何堆积在当前自己的项目中，那么图标的大小，色彩，风格等样素可想而知也必然存在一定的差异。

那么是否有一种方式可以解决该问题。IconFont图标组件库由此而诞生了。

Icon Library：图标库包含一系列标准化图标资源的库，通常用于帮助设计师等开发人员快速选择和使用各种图标。iconLibrary

为什么要使用图标类库，是因为它具有一些优势特点，比如：

1. 提高效率：图标库中已经有大量的标准化图标，使设计师和开发人员可以直接使用，避免了重复设计的时间浪费。
2. 统一风格：使用图标库的图标可以保证图标风格的一致性，提高应用的整体美观度和用户体验。
3. 节省成本：使用图标库可以节省设计师和开发人员的成本，减少制作自定义图标的开销。
4. 可维护性：图标库中的图标通常都是标准化的，易于维护和更新。可以避免因为图标变更带来的维护成本。

当然，图标库也不完善，也有一些不足，比如：

1. 依赖外部资源：需要从外部下载图标库可能会导致应用加载速度变慢。
2. 无效资源的引入：图标库中包含的资源可能成百上千，但项目中使用的图标只有几个几十个，更多引入的图标资源被浪费，占用了项目的空间，影响了性能。
3. 风格受限：图标库中的图标都是标准化的，如果要使用非标准的图标，则需要自己设计。
4. 版权问题：一些图标库可能会有版权问题，需要注意版权问题。
5. 可能无法满足需求：虽然图标库中有大量的图标可供选择，但是并不一定能满足应用的需求。

所以，我们在考虑使用图标库的时候，还是需要进行项目合理性考量。

那么常见的图标库有：ionicons    Ant Design    Element    Material Design Icons

Ionicons: Premium Open Source Icon Pack for Ionic Framework

Material Design Icons - Icon Library - Pictogrammers

Icon 图标 | Element Plus

图标 Icon - Ant Design

第一步：安装(项目是vite环境vue3项目中)

npm i @element-plus/icons-vue -S

第二步：在main.ts入口文件

在该文件中将模块中其所有图标内容进行统一性加载。

并且利用for循环进行遍历，将遍历出的所有图标进行全局组件的公共注册即可。

import { createApp } from "vue";
import "./style.css";
import App from './App.vue';
import * as ElementPlusIconVue from "@element-plus/icon-vue";
const app = createApp(App);
for (const [key,component] of
    Object.entries(ElementPlusIconVue)) {
        app.component(key,component);
    }
app.mount("#app");

第三步：使用

可以在页面或组件中进行图标的直接调用，并设置其宽高等样式

<template>
    <Edit style="width: 1rem" />
</template>

那么以上则是element-plus的应用，我们根据以上内容，可以对其他图标进行举一反三，antd-design的图标操作也是相似的。

第一步：安装npm i @ant-design/icon-vue -S

npm i @ant-design/icon-vue -S

第二步：在main.ts入口文件

import { createApp } from "vue";
import "./style.css";
import App from './App.vue';
import * as ElementPlusIconVue from "@element-plus/icon-vue";
import * as AntDesignIconsValue from "@ant-design/icons-vue";

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

for (const [key,component]
    of Object.entries(AntDesignIconsValue)){
        console.log(key);
        app.component(key,component);
    }


app.mount("#app");

第三步：使用

可以在页面或组件中进行图标的直接调用，并设置其字体大小等样式

<template>
    <Edit style="width: 1rem" />
    <UserDeleteOutlined style="font-size: 48px" />
</template>

至于像ionicons更为简单，只需要在index.html中引入一个js脚本，就可以在页面中使用<ion-icon />标签进行应用

第一步：引入js脚本

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

第二步：使用

<template>
    <ion-icon
    name="heart"
    size="large" />
</template>

需要注意：不管那种图标类库，如果图标库中并不存在想要使用的图标对象，那么暂时是没办法进行自定义图标扩展应用的。