Tabler Icons是550多種完全可定制的SVG圖標的集合,您可以調(diào)整大小,筆觸,顏色,所有圖標都是 MIT 許可下的開源代碼,可以在私人和商業(yè)項目中使用!
使用方法
所有圖標都是用SVG構建的,因此您可以將它們作為、背景圖像和內(nèi)嵌在HTML代碼中。
HTML圖像
如果將圖標作為圖像加載,則可以使用CSS修改其大小。
<img src="path/to/icon.svg" alt="icon title" />
內(nèi)聯(lián)HTML
您可以將圖標文件的內(nèi)容粘貼到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代碼改變圖標的大小、顏色和筆劃寬度。
.icon-tabler {
color: red;
width: 32px;
height: 32px;
stroke-width: 1.25;
}
SVG精靈
使用以下標記添加要在頁面上顯示的圖標(上面示例中的活動可以替換為任何有效的圖標名稱):
<svg width="24" height="24">
<use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
</svg>
多筆劃
此存儲庫中的所有圖標都是使用stroke width屬性的值創(chuàng)建的,因此如果更改該值,則可以獲得與您的設計非常匹配的不同圖標變體。