Watch 1 Star 1 Fork 0

Mikey.Lin / tabler-iconsHTML/CSSMIT

Join us
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
一组300多个MIT许可的免费高质量SVG图标供您在Web项目中使用。 spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Tabler icons

一组300多个MIT许可的免费高质量SVG图标供您在Web项目中使用。 每个图标均以24x24网格和2px的笔划设计。

预览

安装

npm install tabler-icons --save

或者从GitHub下载.

用法

所有图标都是使用SVG构建的,因此您可以将它们放置为<img>,background-image和HTML代码中的内联。

HTML引用

如果将图标加载为图像,则可以使用CSS修改其大小。

<img src="path/to/icon.svg" alt="icon title"/>

内联HTML

您可以将图标文件的内容粘贴到HTML代码中,以将其显示在页面上。

<a href="">
  <svg xmlns="http://www.w3.org/2000/svg" 
    class="icon icon-tabler icon-tabler-disabled" 
    width="24" height="24" viewBox="0 0 24 24" 
    stroke-width="1.25" stroke="currentColor" fill="none" 
    stroke-linecap="round" stroke-linejoin="round">
      ...
  </svg>
  Click me
</a>

使用css的stroke-width属性可以控制图标的线条宽度,color属性更改颜色,width和height属性改变图标大小。

.icon-tabler {
  color: red;//颜色
  width: 32px;//宽度
  height: 32px;//高度
  stroke-width: 1.25;//画笔粗细
}

SVG sprite

添加带有以下标记显示在页面上的图标(示例中的“ activity”可以替换为任何有效的图标名称):

<svg width="24" height="24">
  <use xlink:href="path/to/tabler-sprite.svg#tabler-activity"/>
</svg>

License

Tabler Icons is licensed under the MIT License.

Comments ( 0 )

Sign in for post a comment

HTML/CSS
1
https://gitee.com/webcodes/tabler-icons.git
git@gitee.com:webcodes/tabler-icons.git
webcodes
tabler-icons
tabler-icons
master

Help Search

205735 778617b6 1899542 205747 347fc4a1 1899542