legacy-icons/famfamfam-silk

FamFamFam Silk 图标包,可作为单个图标或 CSS sprite 图表使用

1.0.0 2016-02-18 10:57 UTC

This package is not auto-updated.

Last update: 2024-09-14 18:20:42 UTC


README

NPM version Bower version Packagist version Nuget version

Dependency Status Build Status

关于

如 famfamfam 网站上提供的 Silk 图标包。

所有图标归原作者 Mark James 所有权,联系方式:mjames@gmail.com

此项目的目的是通过各种包管理器(如

所有图标均以 PNG 格式提供。

CSS sprite 图表

您可以直接使用常见的 IMG 标签将图标插入到 HTML 中

<img alt="Delete" src="dist/png/key_delete.png" width="16" height="16">

除了单独的图标外,此项目还提供图标包的 CSS sprite 图表。此 sprite 图表允许通过仅加载 1 张图片来加载整个图标包,从而减少 HTTP 请求。

它看起来是这样的

Spritesheet

此单一图像中所有图标的定位都通过 CSS 完成,这使得您只需添加带有适当类的块类型标签即可获得相同的结果

<div class="famfamfam-silk key_delete"></div>

只需记住将 CSS 样式表添加到您的 HTML 页面的 HEAD 部分!

安装

使用 NPM 获取包

npm install famfamfam-silk

使用 Bower 获取包

bower install famfamfam-silk

使用 Composer / Packagist 获取包

composer require legacy-icons/famfamfam-silk

使用 NuGet 获取包

Install-Package famfamfam-silk

构建整个项目或自定义项目

我们使用 Gulp 来构建项目,因此如果您想重新构建或自定义此项目,则需要 Gulp。

安装 Gulp 后,将您的 CLI 指向工作目录,首先安装依赖项

使用 NPM 2.x.x

npm install

使用 NPM 3.x.x(在安装此模块的依赖项之前解决 node-spritesheet 的依赖项)

npm install grunt grunt-contrib-coffee grunt-contrib-clean

npm install

然后确保您已安装 ImageMagick 以构建 sprite 图表。

然后,您可以通过运行 gulp build 任务来构建项目

gulp build

构建任务执行什么操作?

首先,它从 src 文件夹中提取 PNG 文件,并将它们粘贴到 dist 文件夹。

然后它从位于 src 文件夹中的 PNG 图像创建 sprite 图表,从而在 dist 中创建 sprite 文件夹。

例如,如果您只想在 sprite 图表中包含 application_putmonitor_edit 图标,您只需分叉此项目,将您的 CLI 指向工作目录,清空 src 目录,除了以 PNG 格式的 application_putmonitor_edit 图标外,然后运行 gulp build 任务。

您将获得适当的 sprite 图表和图标副本,直接在 dist 文件夹中。

许可证

请参阅 许可证