tabler icons
Release 3.22.0
Web プロジェクトで使用できる、MIT ライセンスの無料の高品質 SVG アイコン 5718 個のセット。各アイコンは 24x24 グリッドと 2 ピクセルのストロークでデザインされています。
tabler-icons.io で参照 →
私のプロジェクトをサポートし、プロジェクトの成長を支援したい場合は、GitHub でスポンサーになるか、PayPal で寄付することができます :)
npm install @tabler/icons --save
または GitHub からダウンロードするだけです。
すべてのアイコンは SVG で構築されているため、 <img> 、 background-image 、および HTML コードのインラインとして配置できます。
アイコンを画像として読み込む場合は、CSS を使用してそのサイズを変更できます。
< img src =" path/to/icon.svg " alt =" icon title " />アイコン ファイルの内容を 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 ;
}次のマークアップを使用して、ページに表示されるアイコンを追加します (上記の例の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> @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 > < i class =" ti ti-brand-tabler " > </ i > 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 ,
}フォント ファイルのサイズを減らすために、アイコンのサブセットをコンパイルすることを選択できます。配列を空のままにすると、すべてのフォントがコンパイルされます。 2 つのアイコンのみをコンパイルするには、たとえば、 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プロパティの値を使用して作成されているため、値を変更すると、デザインに適合するさまざまなアイコンのバリアントを取得できます。
Tabler Icons は MIT ライセンスに基づいてライセンスされています。
