tabler icons 다운로드 - tabler icons 소스 코드 다운로드

tabler icons

기타 소스코드

Release 3.22.0

다운로드

테이블러 아이콘

웹 프로젝트에 사용할 수 있는 5718개의 무료 MIT 라이선스 고품질 SVG 아이콘 세트입니다. 각 아이콘은 24x24 그리드와 2px 스트로크로 디자인되었습니다.

tabler-icons.io에서 찾아보기 →

후원자

내 프로젝트를 지원하고 성장하는 데 도움을 주고 싶다면 GitHub에서 후원자가 되거나 PayPal에 기부할 수 있습니다 :)

시사

개요 버전(4886 아이콘)

채워진 버전(832개 아이콘)

설치

 npm install @tabler/icons --save

또는 GitHub에서 다운로드하세요.

용법

모든 아이콘은 SVG로 제작되므로 HTML 코드에서 <img> , background-image 및 인라인으로 배치할 수 있습니다.

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 변경할 수 있습니다.

. 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 >

반응하다

@tabler/icons-react 패키지를 통해 사용할 수 있는 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와 함께 사용할 수 있도록 자체 유형 선언을 내보냅니다.

자세한 내용은 설명서를 참조하세요.

뷰

@tabler/icons-vue 패키지를 통해 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-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와 함께 사용할 수 있도록 자체 유형 선언을 내보냅니다.

자세한 사용법 문서는 공식 문서를 참조하세요.

날씬한

@tabler/icons-svelte 패키지를 통해 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를 설치하세요.

글꼴을 컴파일할 때 루트 폴더( package.json 과 동일한 폴더)에서 json 파일 compile-options.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 " ]
}