在前端项目中
引入阿里巴巴矢量图标库（
IconFont）是一个常见的需求，尤其是在使用 Vue 或基于
Element UI 的项目时。以下是如何在不同场景下正确
引入和使用
IconFont 图标的方法：
### 在 Vue 项目中使用
IconFont
#### 方法一：通过 Unicode 使用图标
1. 登录 [
IconFont 官网]
(https://www.
iconfont.cn/
) 并创建自己的
图标库。
2. 将所需图标添加到购物车，并将其加入项目中。
3. 下载项目中的 `demo_index.html` 文件，查看图标的使用方式。
4. 将下载的字体文件（如 `.woff`, `.ttf`, `.svg` 等）放入项目的 `assets/fonts/` 目录。
5. 在项目的全局样式文件（如 `main.css` 或 `App.vue` 的 `<style>` 部分）中
引入字体资源：
```css
@font
-face {
font
-family: '
iconfont';
src: url
('./assets/fonts/
iconfont.woff2'
) format
('woff2'
),
url
('./assets/fonts/
iconfont.woff'
) format
('woff'
);
font
-weight: normal;
font
-style: normal;
}
.
iconfont {
font
-family: "
iconfont" !important;
font
-size: 16px;
font
-style: normal;
-webkit
-font
-smoothing: antialiased;
-moz
-osx
-font
-smoothing: grayscale;
}
```
6. 在组件中使用图标：
```html
<i class="
iconfont"></i>
```
#### 方法二：通过 Font Class 使用图标
1. 在
IconFont 的项目页面中选择“Font class”方式获取图标代码。
2. 将生成的 CSS 文件（包含 `.
iconfont` 和具体图标的类名）
引入项目。
3. 在组件中直接使用类名调用图标：
```html
<i class="
iconfont icon-home"></i>
```
#### 方法三：通过 Symbol 使用图标（推荐）
1. 下载项目后，在 `demo_index.html` 中找到 SVG Symbol 的使用方式。
2.
引入 `
iconfont.js` 文件到项目中（通常为 SVG 雪碧图形式）。
3. 在入口文件（如 `main.js`）中注册
图标库：
```javascript
import '@/assets/
iconfont/
iconfont.js'; // 根据实际路径调整
```
4. 创建一个 Vue 组件用于显示图标，例如 `Svg
Icon.vue`：
```vue
<template>
<svg :width="size" :height="size" viewBox="0 0 24 24">
<path :d="path" :fill="color" />
</svg>
</template>
<script>
export default {
props: {
name: String,
color: { type: String, default: '#333' },
size: { type: [String, Number], default: 24 }
},
data
() {
const
icons = {
home: 'M12 2L2 7l10 5 10
-5
-10
-5zM2 17l10 5 10
-5M2 12l10 5 10
-5',
user: 'M12 12c2.21 0 4
-1.79 4
-4s
-1.79
-4
-4
-4
-4 1.79
-4 4 1.79 4 4 4zm0 2c
-2.67 0
-8 1.34
-8 4v2h16v
-2c0
-2.66
-5.33
-4
-8
-4z'
};
return {
path:
icons[this.name]
};
}
};
</script>
```
5. 在其他组件中使用该图标组件：
```vue
<template>
<div>
<svg
-icon name="home" color="#f00" size="32" />
</div>
</template>
```
### 在
Element UI 项目中使用
IconFont
Element UI 支持通过 `prefix
-icon` 属性设置输入框前缀图标，也可以直接在菜单、按钮等组件中使用
IconFont。
#### 示例：在表单中使用
IconFont 作为前缀图标
```vue
<el
-form label
-width="0px" class="login_form">
<!
-- 用户名
-->
<el
-form
-item>
<el
-input prefix
-icon="
iconfont icon-yonghu"></el
-input>
</el
-form
-item>
<!
-- 密码
-->
<el
-form
-item>
<el
-input prefix
-icon="
iconfont icon-mima"></el
-input>
</el
-form
-item>
</el
-form>
```
#### 示例：在菜单项中使用
IconFont 图标
```vue
<el
-menu
-item index="/home/index">
<i class="
iconfont icon-shouye"></i>
<template slot="title">首页</template>
</el
-menu
-item>
```
以上方法适用于大多数现代前端项目，尤其是基于 Vue 和
Element UI 的项目。确保字体文件路径正确，并根据需要调整图标大小和颜色[^1]。
---
本文介绍如何在Vue项目中集成自定义图标库，并提供详细的步骤，包括创建图标项目、下载及配置图标库等。
扫一扫
4157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
