iconPark的简单使用

发布时间:2025-05-20 02:05:45 发布人:远客网络

iconPark的简单使用

1、IconPark提供了超过2000个高质量图标，让你在项目中使用更便捷。

2、你可以在不同的平台导出多种图标代码库，包括React、Vue、小程序等，使用方式灵活多样。

3、安装IconPark，你可以选择全局引用，方式一、方式二和推荐的方式三：创建按需加载的IconParkIcon.js文件。

4、局部引用IconPark，以React版图标库为例，你只需将代码引入你的项目中即可。

5、IconPark的优势在于其多种代码包，方便你在不同类型的项目中应用。你还可以通过更改fill和stroke属性，为一个SVG图标源文件变换出不同的主题，包括线框、填充、双色、多色等。

6、你可以在IconPark网站上使用在线更改颜色、大小、线框宽度、端点类型、拐点类型等属性的功能，实现定制化需求。

7、将IconPark嵌入项目中，你可以从NPM根目录的icons.json文件中获取图标名称、作者、分类、标签以及创建时间等额外信息。

8、IconPark支持项目管理，分为官方图标库和项目管理两部分，操作链路清晰。

9、如果你想深入了解IconPark的使用指南，可以访问网站地址：iconpark.bytedance.com/，GitHub开源项目：github.com/bytedance/Ic...

10、IconPark的使用文档和在线链接(Web Component)功能使用指南，可以提供更详细的指导信息，助你高效使用IconPark。

之前在项目中使用layer弹框感觉体验很好，这次的项目中就引入了，但是引入之后，弹出层

layer.msg("密码不正确！",{icon:5,time:1000});

net:ERR_ABORTED layer.js

于是找到 layer.js，搜索 layer.css，会搜索到两处地方，修改第二处，代码如下：

.n=(a?"modules/layer/":"theme/")+"default/layer.css?v="+r.v+i;return a.

.n=(a?"modules/layer/":"theme/")+"././css/layer.css?v="+r.v+i;return a.

也就是让他的路径指向你layer.css存放的文件夹下。

但是刷新页面发现提示说找不到 icon.png图片!于是去layer官网下载layer，之后找到该图片，图片如下：

把他拷贝到图片存放的路径下，之后打开layer.css，搜索 icon.png,并把该图片路径指向你的图片存放文件夹，代码如下：

.layui-layer-ico{background:url(./img/icon.png) no-repeat}

当然了，还有一个最简单的办法就是，到官网下载layer，把他全部拷贝到项目中，之后在页面只需要引入：