damieng / silk-companion
Silk-Companion 图标集
This package is not auto-updated.
Last update: 2024-09-14 18:14:54 UTC
README
关于
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 请求。
它实际上看起来是这样的
这个单独的图像中所有图标的定位都是通过 CSS 实现的,这允许您只需添加带有正确类的块型标签即可得到相同的结果
<div class="silk-companion folder_connect"></div>
只需记住将 CSS 样式表添加到您的 HTML 页面的 HEAD 中!
包
NPM
npm install silk-companion
Bower
bower install silk-companion
Composer / Packagist
构建(整个项目或您的自定义项目)
我们使用 Gulp 来构建项目,因此如果您想要重新构建或自定义此项目,您需要 Gulp。
安装 Gulp 后,将您的 CLI 指向工作目录,首先安装依赖项
npm install
然后,您可以通过运行 gulp build
任务来构建项目
gulp build
构建任务做了什么
首先,它从 src
文件夹中获取 PNG 文件,并将它们粘贴到 dist
文件夹中。
然后,它从位于 src
文件夹中的 PNG 图像创建雪碧图,从而在 dist
中创建 sprite
文件夹。
例如,如果您只想在雪碧图中包含 bell_silver
和 page_break
图标,您只需要分叉此项目,将您的 CLI 指向工作目录,清空 src
目录(除了 bell_silver
和 page_break
图标),然后运行 gulp build
任务。
您将在 dist
文件夹中获得正确的雪碧图和图标的副本。
许可
图标采用双重许可,许可协议为 Creative Commons Attribution 2.5 License 和 Creative 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