# tabler-icons

**Repository Path**: webcodes/tabler-icons

## Basic Information

- **Project Name**: tabler-icons
- **Description**: 一组300多个MIT许可的免费高质量SVG图标供您在Web项目中使用。
- **Primary Language**: HTML/CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-03-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Tabler icons

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

## 预览

![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons.png)


## 安装

```
npm install tabler-icons --save
```

或者从[GitHub下载](https://github.com/tabler/tabler-icons/releases).

## 用法

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

### HTML引用

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

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

### 内联HTML

您可以将图标文件的内容粘贴到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属性改变图标大小。

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

![](https://github.com/wz265/web/blob/master/IMG_20200322_132620.jpg)

### SVG sprite


添加带有以下标记显示在页面上的图标（示例中的“ activity”可以替换为任何有效的图标名称）：
```html
<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](http://gitee.com/webcodes/tabler-icons/blob/master/LICENSE).