damieng/silk-companion

Silk-Companion 图标集

安装: 17

依赖: 0

建议: 0

安全: 0

星标: 36

关注者: 4

分支: 5

开放问题: 0

语言:JavaScript

0.2.3 2015-07-28 00:59 UTC

This package is not auto-updated.

Last update: 2024-09-14 18:14:54 UTC


README

NPM version Bower version Packagist version

Build Status

关于

Silk companion icon set #1 - "More Silk!" 最后更新时间:2007年11月19日 包装者:T1st3

描述

FamFamFam Silk 图标集是一套非常大的、风格一致的精美图标集,这套图标在应用程序和网站上都非常受欢迎。

在许多情况下,我都发现自己需要更多同风格的图标。这个配套集不仅代表了我需要的东西,也代表了我想要添加的东西。

有些是同风格的新图标,有些是现有图标的替代尺寸/颜色,还有些是元素的新组合。

CSS 雪碧图

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

    <img alt="Connect" src="dist/png/folder_connect.png" width="16" height="16">

除了单独的图标之外,该项目还提供了一个图标包的 CSS 雪碧图。这个雪碧图允许一次性加载整个图标包,从而减少 HTTP 请求。

它实际上看起来是这样的

Spritesheet

这个单独的图像中所有图标的定位都是通过 CSS 实现的,这允许您只需添加带有正确类的块型标签即可得到相同的结果

    <div class="silk-companion folder_connect"></div>

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

NPM

npm install silk-companion

Bower

bower install silk-companion

Composer / Packagist

在 Packagist 上的 silk-companion

构建(整个项目或您的自定义项目)

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

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

     npm install

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

     gulp build

构建任务做了什么

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

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

例如,如果您只想在雪碧图中包含 bell_silverpage_break 图标,您只需要分叉此项目,将您的 CLI 指向工作目录,清空 src 目录(除了 bell_silverpage_break 图标),然后运行 gulp build 任务。

您将在 dist 文件夹中获得正确的雪碧图和图标的副本。

许可

图标采用双重许可,许可协议为 Creative Commons Attribution 2.5 LicenseCreative Commons Attribution 3.0 License

包装文件采用 MIT license 许可。

该工作基于此原始 Silk README 文件

Silk icon set 1.3

_________________________________________
Mark James
http://www.famfamfam.com/lab/icons/silk/
_________________________________________

This work is licensed under a
Creative Commons Attribution 2.5 License.
[ http://creativecommons.org/licenses/by/2.5/ ]

This means you may use it for any purpose,
and make any changes you like.
All I ask is that you include a link back
to this page in your credits.

Are you using this icon set? Send me an email
(including a link or picture if available) to
mjames@gmail.com

Any other questions about this icon set please
contact mjames@gmail.com