IconPark 开源图标库使用教程，让你的设计快人一步！_icon-park
IconPark 是字节跳动官方出品的免费开源图标库，遵循友好的 MIT 开源协议，可放心使用。
IconPark提供超过 2400 个高质量图标，涵盖 32 种分类，包括基础图标、人群、书籍、内容编辑、天气、手势、方向、交流、医疗健康、声音、时间、图表、抽象等，能满足网页设计、移动应用开发、PPT 制作等大多数项目在不同场景下的需求，无论是作为网页导航图标、移动应用的功能图标，还是 PPT 中的装饰图标等，都能在其中找到合适的图标。
IconPark支持线性、填充、双色、四色 4 种主题，用户可在线编辑图标的颜色、线条粗细、大小等属性，实现一键换肤，让图标更好地融入不同设计风格和场景，满足个性化设计需求。通过改变单一 SVG 源文件的属性来变换出多种主题，无需使用多个 SVG 文件。
IconPark使用方式如下：
一、npm方式使用iconpark
npm安装iconpark
npm install @icon-park/vue-next --save
单个图标使用 缺点是图标组件名称容易与系统组件名称冲突 不易识别 同时单个引入繁琐麻烦
//使用iconpark的home图标
import {Home} from \'@icon-park/vue-next\'; //引入iconpark的home图标
export default {
components: {
Home
}
}
全局引用 缺点引入几千个图标 编译体积很大
import \'@icon-park/vue-next/styles/index.css\';
import {install} from \'@icon-park/vue-next/es/all\';
import {createApp} from \'vue\';
const app = createApp({});
install(app); // 使用默认前缀“icon”，例如：icon是People，名称是icon-people
app.mount(\'#app\');
全局使用
二、js文件方式使用iconpark的svg图标 原理同iconfont
缺点也是生成的js文件里有dom操作 不支持小程序 微信小程序及抖音小程序及app里的window全局变量都为undefined
将需要使用的图标加入到自己项目中 下载项目的svg symbol类型的js文件 将此js文件复制到uniapp项目里 比如statci/iconpark.js
在app.vue里引入iconpark.js文件 //引入这一个js文件即可
//引入本地iconpark.js 远程js文件每次加入新图标后 重新生成js地址也会变化 并且uniapp中无法引入远程js文件
import \'@/static/iconfont/iconpark.js\' //js里有dom操作 不支持小程序
然后在使用图标的页面里如下使用
//动态使用
.iconpark-icon {
width: 35px;
height: 35px;
//其它样式
}
三、直接使用iconpark的png图片 由于第二种方式的js文件不支持小程序 第三种方案是直接下载项目的png图标使用
.icon {
width: 20px;
height: 20px;
}
缺点：png图片较大 测试11张png图片占用180Kb 50张iconpark的png图片就1M了 对于微信小程序主包2M的限制 这是极大的缺点
四、uniapp和微信小程序的 组件支持静态的 svg 图片，可以把 iconify 的图标保存为本地的 svg 文件使用
这种方式很好 因为单张svg图片大概1Kb不到 相比png图片动辄几十Kb的尺寸 非常有利于小程序
五、iconfont与iconpark
不管是iconfont还是iconpark svg的使用方式都是一样的 缺点都是js加载的svg图标不支持小程序
比如
iconfont图标使用 //class=\"icon\"可以随意修改其它class
//href添加了xlink: 不加xlink:也是正常的 因为iconfont的所有图标名都是以icon-开头所以使用了#icon-图标名 本质上还是
iconpark图标使用 //class=\"iconpark-icon\"可以随意修改成其它class 只不过从官网复制的svg的默认class是iconpark-icon
下面的这种svg的使用方式 微信小程序也是不支持的
<path fill=\"#64a4f7\"
d=\"M20 15.016h-5v-.013a1.984 1.984 0 0 0-1.978-1.978h-.035l3.857-10.393l-1.732-.643l-4.095 11.036h-.039A1.984 1.984 0 0 0 9 15.003v.013H4v2h16Zm0 3.002H4L2 22h20z\" />
