介绍

IconPark是字节跳动团队开放的开源图标库，提供2000多个优质图标，提供可视化界面配置实现不同方案，非常适合开发者和设计师！

Github

GitHub:https://github.com/bytedance/IconPark

官方网站：https://iconpark.oceanengine.com/

特性

七彩资源库免费使用2400个基础图标和29大类图标，提供更多选择，通过改动可以达到百万级订单，使用图标非常方便

IconPark可以被任何人使用，包括设计师、工程师或产品经理。它为不同的人提供了一套用户指南，非常容易学习和使用

主题变换IconPark可以通过单个SVG源文件变换各种主题，包括线框、填充、双色、多色等特性，只需要配置两个属性即可

IconPark有非常丰富的分类，包括基础、办公、编辑、表达、餐饮、运营、抽象、儿童、方向、服装、符号、行业、家居、建筑、交流、连接、旅行、美容、品牌、金钱、人物、声音、时间、手势、书籍、数据库、天气、图表等等涵盖了许多已经适应不同场景的分类！

为前端开发人员提供的框架组件包包括React、Vue(2和3)和SVG的开发人员使用的包

定制任何人都可以通过可视化界面进行一些配置，满足各种需求，包括尺寸、线段粗细、样式、笔画颜色、端点类型、拐点类型等等

安装使用

作为开发者，作者经常需要找到一些图标。当然有很多选择。这里，我们以Vue3项目中的图标为例来安装和使用：

依赖于安装的软件包是使用您最喜欢的软件包管理工具安装的，例如npm或纱线

="font-size:15px;">npm install @icon-park/vue-next --save//或者yarn add @icon-park/vue-next --save

最简单的示例如下：

<template><home theme="filled"/></template><script>import {Home} from '@icon-park/vue-next';export default { components: { Home }}</script>

全局引用（不推荐）

import {install} from '@icon-park/vue-next/es/all';import '@icon-park/vue-next/styles/index.css';import {createApp} from 'vue';const app = createApp({});install(app); install(app, 'i');app.mount('#app');

针对性全局配置

<template><div><home/></div></template><script lang="ts">import {DEFAULT_ICON_CONFIGS, IconProvider} from '@icon-park/vue-next';import {Home} from '@icon-park/vue-next';export default { name: 'App', setup(){ IconProvider({...DEFAULT_ICON_CONFIGS, prefix: 'icon'}); }, components: { Home }};</script>

按需引入（babel-plugin-import）

推荐按需加载图标，因为这样可以大大减少编译代码量

{ "plugins": [ [ "import", { "libraryName": "@icon-park/vue-next", "libraryDirectory": "es/icons", "camel2DashComponentName": false } ] ]}

<template><icon-park type="AddText" theme="filled"/><icon-park type="add-text" theme="filled"/></template><script>import {IconPark} from '@icon-park/vue-next/es/all';export default { components: { IconPark }}</script>