All Projects → benflap → tabler-icons-svelte

benflap / tabler-icons-svelte

Licence: MIT License
A library of SVG Svelte components for Tabler Icons.

Programming Languages

javascript
184084 projects - #8 most used programming language
Svelte
593 projects

Projects that are alternatives of or similar to tabler-icons-svelte

fa-svelte
Font Awesome 5 for svelte.js
Stars: ✭ 72 (+44%)
Mutual labels:  svelte-components, svelte
svelte-simple-icons
📦 This package provides the Simple Icons packaged as a set of Svelte components.
Stars: ✭ 27 (-46%)
Mutual labels:  icons, svelte
kahi-ui
Straight-forward Svelte UI for the Web
Stars: ✭ 169 (+238%)
Mutual labels:  svelte-components, svelte
Teenyicons
Tiny minimal 1px icons designed to fit in the smallest places.
Stars: ✭ 1,631 (+3162%)
Mutual labels:  icons, svgs
focus-svelte
focus lock for svelte
Stars: ✭ 18 (-64%)
Mutual labels:  svelte-components, svelte
Svelte Awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
Stars: ✭ 193 (+286%)
Mutual labels:  icons, svelte
svelte-material
Modular and customizable Material Design UI components for Svelte.js
Stars: ✭ 30 (-40%)
Mutual labels:  svelte-components, svelte
Svelte Material Ui
Svelte Material UI Components
Stars: ✭ 2,081 (+4062%)
Mutual labels:  svelte-components, svelte
phosphor-figma
A flexible icon family for Figma
Stars: ✭ 17 (-66%)
Mutual labels:  icons, svgs
carbon-components-svelte
Svelte implementation of the Carbon Design System
Stars: ✭ 1,615 (+3130%)
Mutual labels:  svelte-components, svelte
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+21616%)
Mutual labels:  icons, tabler-icons
svelte-flat-ui
Flat UI Independent JS Components + English Docs =
Stars: ✭ 45 (-10%)
Mutual labels:  svelte-components, svelte
Iconify Sketch
Sketch plug-in for importing over 70,000 icons from 80+ icon sets, including Material Design Icons, FontAwesome, Jam Icons, Open Emoji and many others.
Stars: ✭ 76 (+52%)
Mutual labels:  icons, svelte
svelte-lottie-player
Lottie Player component for Svelte
Stars: ✭ 90 (+80%)
Mutual labels:  svelte-components, svelte
Browser Logos
🗂 High resolution web browser logos
Stars: ✭ 5,538 (+10976%)
Mutual labels:  icons, svgs
s-date-range-picker
📅 A date range picker built with Svelte
Stars: ✭ 13 (-74%)
Mutual labels:  svelte-components, svelte
svelte-progressbar
A multiseries, SVG progressbar component made with Svelte
Stars: ✭ 85 (+70%)
Mutual labels:  svelte-components, svelte
sapper-template-rollup
Starter Rollup template for Sapper apps using postcss, cssnano, tailwindcss, and svelte-preprocess.
Stars: ✭ 32 (-36%)
Mutual labels:  svelte-components, svelte
SketchSVG
Have icons in a Sketch file but don't want to manually extract and compress them as SVGs? Let our SketchSVG tool do it!
Stars: ✭ 23 (-54%)
Mutual labels:  icons, svgs
p5-svelte
Easily add p5 sketches to a Svelte project 🍛 🌱
Stars: ✭ 94 (+88%)
Mutual labels:  svelte-components, svelte

tabler-icons-svelte

npm version npm downloads MIT License

A library of Svelte components for Tabler Icons.

A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.

Installation

# yarn
yarn add tabler-icons-svelte --dev

# npm
npm install tabler-icons-svelte  --save-dev

tabler-icons-svelte needs to be added as a dev dependency as Svelte requires original component source

Usage

Import components inside of the <script> and use like any other Svelte component.

Find icons:

Import Components From Package

The easiest way to use the icon components is by importing them from the package.

<script>
    import { CurrencyBitcoin, BrandGithub, CircleX } from "tabler-icons-svelte";
</script>

<CurrencyBitcoin />
<BrandGithub />
<CircleX />

Import Components From File

If your build times are high, import the components from their svelte files.

<script>
    import Volume2 from "tabler-icons-svelte/icons/Volume2.svelte";
    import CurrencyBitcoin from "tabler-icons-svelte/icons/CurrencyBitcoin.svelte";
</script>

<Volume2 />
<CurrencyBitcoin size="2rem" />

Props

The components each accept 3 props:

Prop Default
size 24
color currentColor
strokeWidth 2

Development Workflow

See CONTRIBUTING.md

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].