Скачать tabler icons - tabler icons скачать исходный код

tabler icons

Другой исходный код

Release 3.22.0

Скачать

Иконки таблиц

Набор из 5718 бесплатных высококачественных SVG-значков, лицензированных MIT, которые вы можете использовать в своих веб-проектах. Каждая иконка имеет сетку 24x24 и размер обводки 2 пикселя.

Просмотрите на tabler-icons.io →

Спонсоры

Если вы хотите поддержать мой проект и помочь мне его развивать, вы можете стать спонсором на GitHub или просто сделать пожертвование на PayPal :)

Предварительный просмотр

Контурная версия (4886 значков)

Заполненная версия (832 иконки)

Установка

 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 >

Благодаря этому вы можете изменить размер, цвет и stroke-width значков с помощью кода CSS.

. icon-tabler {
  color : red;
  width : 32 px ;
  height : 32 px ;
  stroke-width : 1.25 ;
}

SVG-спрайт

Добавьте значок, который будет отображаться на вашей странице, со следующей разметкой ( activity в приведенном выше примере можно заменить любым допустимым именем значка):

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

Реагировать

Компоненты React доступны через пакет @tabler/icons-react .

 import { IconAward } from '@tabler/icons-react' ;

const MyComponent = ( ) => {
  return < IconAward
    size = { 36 } // set custom `width` and `height`
    color = "red" // set `stroke` color
    stroke = { 3 }  // set `stroke-width`
    strokeLinejoin = "miter" // override other SVG props
  / >
}

@tabler/icons-react экспортирует собственные объявления типов для использования с React и Typescript.

Более подробную информацию смотрите в документации.

Вю

Компоненты Vue доступны через пакет @tabler/icons-vue .

< template >
  <!-- basic usage -->
  < IconHome />

  <!-- set `stroke` color -->
  < IconHome color = " red " />
  < IconHome stroke = " red " />

  <!-- set custom `width` and `height` -->
  < IconHome size = " 36 " />

  <!-- set `stroke-width` -->
  < IconHome strokeWidth = " 2 " />
  < IconHome stroke-width = " 2 " />
</ template >

< script >
// Returns Vue component
import { IconHome } from ' @tabler/icons-vue ' ;

export default {
  components : { IconHome }
};
</ script >

или с помощью <script setup>

 < script setup >
// Import Vue component
import { IconHome } from ' @tabler/icons-vue ' ;
</ script >

< template >
  < IconHome color = " red " size = " 36 " strokeWidth = " 2 " />
</ template >

Более подробную информацию смотрите в документации.

Угловой

Компоненты Angular доступны через пакет angular-tabler-icons . Установите пакет, затем создайте модуль значков:

 import { NgModule } from '@angular/core' ;

import { TablerIconsModule } from 'angular-tabler-icons' ;
import { IconCamera , IconHeart , IconBrandGithub } from 'angular-tabler-icons/icons' ;

// Select some icons (use an object, not an array)
const icons = {
  IconCamera ,
  IconHeart ,
  IconBrandGithub
} ;

@ NgModule ( {
  imports : [
    TablerIconsModule . pick ( icons )
  ] ,
  exports : [
    TablerIconsModule
  ]
} )
export class IconsModule { }

После импорта IconsModule в свой функциональный или общий модуль используйте значки следующим образом:

 < i-tabler name =" camera " > </ i-tabler >
< i-tabler name =" heart " style =" color: red; " > </ i-tabler >
< i-tabler name =" brand-github " class =" someclass " > </ i-tabler >

angular-tabler-icons экспортирует собственные объявления типов для использования с Typescript.

Дополнительную документацию по использованию можно найти в официальной документации.

Стройный

Компоненты Svelte доступны через пакет @tabler/icons-svelte .

 < script lang = "ts" >
  import { IconHeart } from '@tabler/icons-svelte';
< / script >

< main >
  < IconHeart size = { 48 } stroke = { 1 } / >
  < IconHeart size = "32" stroke = "1.5" / >
  < IconHeart color = "crimson" class = "p-1" size = "96" stroke = "2" / >
< / main>

CDN

Все файлы, включенные в пакет @tabler/icons npm, доступны через CDN.

Реагировать на иконки

 < script src =" https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-react/dist/index.umd.min.js " > </ script >

Иконочный шрифт

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css " >

Чтобы загрузить конкретную версию, замените latest на нужный номер версии.

 < script src =" https://cdn.jsdelivr.net/npm/@tabler/[email protected]/icons-react/dist/index.umd.min.js " > </ script >

HTML

 < i class =" ti ti-brand-tabler " > </ i >

CSS

 content : 'ec8f' ;

Компиляция шрифтов

Чтобы скомпилировать шрифты, сначала установите FontForge.

При компиляции шрифта он будет искать файл json compile-options.json в корневой папке (та же папка, что и package.json ). В этом файле вы можете определить дополнительные параметры:

Настройки по умолчанию, если вы не определили файл, будут следующими:

{
  "includeIcons" : [],
  "fontForge" : " fontforge " ,
  "strokeWidth" : null
}

Исполняемый файл Fontforge должен быть указан в пути, или вы можете указать путь к загруженному исполняемому файлу FontForge в файле конфигурации. Если вы установили его на Mac, в каталоге вашего приложения это будет /Applications/FontForge.app/Contents/MacOS/FontForge . Вы можете установить это значение в файле compile-options.json .

{
  "fontForge" : " /Applications/FontForge.app/Contents/MacOS/FontForge "
}

Для компиляции шрифтов выполните:

npm run build-iconfont

По умолчанию ширина обводки равна 2. Вы можете изменить ширину обводки в compile-options.json

{
  "strokeWidth" : 1.5 ,
}

Чтобы уменьшить размер файла шрифта, вы можете скомпилировать дополнительный набор значков. Если вы оставите массив пустым, он скомпилирует все шрифты. Чтобы скомпилировать только два значка, вы можете установить, например, следующую опцию в compile-options.json :

{
  "includeIcons" : [ " alert-octagon " , " alert-triangle " ]
}

Необязательное свойство includeCategories — массив или строка категорий значков, которые необходимо включить; имена категорий не чувствительны к регистру.

{
  "includeCategories" : [ " Devices " , " System " ]
}

или

{
  "includeCategories" : " Devices System "
}

Необязательное свойство excludeIcons — массив имен значков, используемый для исключения значков некоторых категорий:

{
  "includeCategories" : [ " system " ],
  "excludeIcons" : [ " adjustments " ]
}

Комплексное решение:

{
  "includeIcons" : [ " alert-octagon " , " alert-triangle " ],
  "includeCategories" : [ " devices " , " system " ],
  "excludeIcons" : [ " adjustments " ]
}

Реактивный ранец

Для Android или настольного компьютера вы можете использовать compose-icons для использования значков в своих проектах. (см. документы)

Множественные удары

Все значки в этом репозитории созданы со значением свойства stroke-width , поэтому, если вы измените значение, вы сможете получить разные варианты значков, которые хорошо впишутся в ваш дизайн.