From 7932c63b79fd52013048a5acd43cf7f8cef3f99c Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 13 Mar 2024 23:59:18 +0100 Subject: [PATCH] add docs to repo --- docs/icons/eps.mdx | 13 +++++ docs/icons/figma.mdx | 7 +++ docs/icons/index.mdx | 103 ++++++++++++++++++++++++++++++++++++ docs/icons/pdf.mdx | 13 +++++ docs/icons/png.mdx | 19 +++++++ docs/icons/preact.mdx | 40 ++++++++++++++ docs/icons/react-native.mdx | 39 ++++++++++++++ docs/icons/react.mdx | 40 ++++++++++++++ docs/icons/solidjs.mdx | 39 ++++++++++++++ docs/icons/sprite.mdx | 22 ++++++++ docs/icons/svelte.mdx | 40 ++++++++++++++ docs/icons/svg.mdx | 68 ++++++++++++++++++++++++ docs/icons/vue.mdx | 45 ++++++++++++++++ docs/icons/webfont.mdx | 52 ++++++++++++++++++ 14 files changed, 540 insertions(+) create mode 100644 docs/icons/eps.mdx create mode 100644 docs/icons/figma.mdx create mode 100644 docs/icons/index.mdx create mode 100644 docs/icons/pdf.mdx create mode 100644 docs/icons/png.mdx create mode 100644 docs/icons/preact.mdx create mode 100644 docs/icons/react-native.mdx create mode 100644 docs/icons/react.mdx create mode 100644 docs/icons/solidjs.mdx create mode 100644 docs/icons/sprite.mdx create mode 100644 docs/icons/svelte.mdx create mode 100644 docs/icons/svg.mdx create mode 100644 docs/icons/vue.mdx create mode 100644 docs/icons/webfont.mdx diff --git a/docs/icons/eps.mdx b/docs/icons/eps.mdx new file mode 100644 index 000000000..01b036d9d --- /dev/null +++ b/docs/icons/eps.mdx @@ -0,0 +1,13 @@ +--- +title: EPS version +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +All EPS files are stored in `icons` subdirectory. diff --git a/docs/icons/figma.mdx b/docs/icons/figma.mdx new file mode 100644 index 000000000..344206fa9 --- /dev/null +++ b/docs/icons/figma.mdx @@ -0,0 +1,7 @@ +--- +title: Figma plugin +--- + +![Tabler Figma Plugin](/docs/icons/figma-plugin.png) + +[Download Plugin](https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons) diff --git a/docs/icons/index.mdx b/docs/icons/index.mdx new file mode 100644 index 000000000..433c75f75 --- /dev/null +++ b/docs/icons/index.mdx @@ -0,0 +1,103 @@ +--- +title: Tabler Icons +description: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons. +--- + +```html example centered separated + + + + + + + + + + + + + + + + + + + + + + +``` + +## Customize stroke + +The `stroke-width` property is a powerful tool for customizing icons. This property allows you to control the thickness of the stroke used to outline an icon, giving you precise control over its appearance. By adjusting the `stroke-width` property, you can make an icon more or less prominent, change its emphasis, or create unique visual effects. For example, a thinner stroke may be ideal for icons with intricate designs or fine details, while a thicker stroke can add visual weight and impact to simpler, bolder icons. + +All icons are designed by default with `2px` stroke. + +```html example centered separated + + + + + + + + + + + + + + + + + + + + + + + + +``` + +```html + + ... + + + ... + + + ... + +``` + +## Filled version of icons + +```html example centered separated + + + + + + + + + + + + + + + + + +``` + +## Browse icons + +Tabler Icons is a comprehensive icon library that features over high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications. + +To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font. + diff --git a/docs/icons/pdf.mdx b/docs/icons/pdf.mdx new file mode 100644 index 000000000..5508e0d36 --- /dev/null +++ b/docs/icons/pdf.mdx @@ -0,0 +1,13 @@ +--- +title: PDF version +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +All PDF files are stored in `icons` subdirectory. diff --git a/docs/icons/png.mdx b/docs/icons/png.mdx new file mode 100644 index 000000000..19e60ff4d --- /dev/null +++ b/docs/icons/png.mdx @@ -0,0 +1,19 @@ +--- +title: PNG version +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-png.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +All PNG files are stored in `icons` subdirectory. + +## CDN + +```html + +``` diff --git a/docs/icons/preact.mdx b/docs/icons/preact.mdx new file mode 100644 index 000000000..c662b252e --- /dev/null +++ b/docs/icons/preact.mdx @@ -0,0 +1,40 @@ +--- +title: Tabler Icons for Preact +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-preact.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## How to use + +It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. + +```js +import { IconArrowDown } from '@tabler/icons-preact'; + +const App = () => { + return ; +}; + +export default App; +``` + +You can pass additional props to adjust the icon. + +```js + +``` + +### Props + +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `stroke` | _Number_ | 2 | + diff --git a/docs/icons/react-native.mdx b/docs/icons/react-native.mdx new file mode 100644 index 000000000..65200deb6 --- /dev/null +++ b/docs/icons/react-native.mdx @@ -0,0 +1,39 @@ +--- +title: Tabler Icons for React Native +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react-native.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## How to use + +It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. + +```js +import { IconArrowLeft } from '@tabler/icons-react-native'; + +const App = () => { + return ; +}; + +export default App; +``` + +You can pass additional props to adjust the icon. + +```js + +``` + +### Props + +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `stroke` | _Number_ | 2 | diff --git a/docs/icons/react.mdx b/docs/icons/react.mdx new file mode 100644 index 000000000..dc598279f --- /dev/null +++ b/docs/icons/react.mdx @@ -0,0 +1,40 @@ +--- +title: Tabler Icons for React +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## How to use + +It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. + +```js +import { IconArrowLeft } from '@tabler/icons-react'; + +const App = () => { + return ; +}; + +export default App; +``` + +You can pass additional props to adjust the icon. + +```js + +``` + +### Props + +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `stroke` | _Number_ | 2 | + diff --git a/docs/icons/solidjs.mdx b/docs/icons/solidjs.mdx new file mode 100644 index 000000000..3de3e78ac --- /dev/null +++ b/docs/icons/solidjs.mdx @@ -0,0 +1,39 @@ +--- +title: Tabler Icons for SolidJS +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-solidjs.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## How to use + +It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. + +```js +import { IconArrowRight } from '@tabler/icons-solidjs'; + +const App = () => { + return ; +}; + +export default App; +``` + +You can pass additional props to adjust the icon. + +```js + +``` + +### Props + +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `stroke` | _Number_ | 2 | diff --git a/docs/icons/sprite.mdx b/docs/icons/sprite.mdx new file mode 100644 index 000000000..4466b9527 --- /dev/null +++ b/docs/icons/sprite.mdx @@ -0,0 +1,22 @@ +--- +title: SVG sprite version +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-sprite.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## Usage + +Add an icon to be displayed on your page with the following markup (`activity` in the following example can be replaced with +any valid icon name): + +```html + + + +``` diff --git a/docs/icons/svelte.mdx b/docs/icons/svelte.mdx new file mode 100644 index 000000000..7001229e8 --- /dev/null +++ b/docs/icons/svelte.mdx @@ -0,0 +1,40 @@ +--- +title: Tabler Icons for Svelte +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svelte.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## How to use + +It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. + +```sveltehtml + + +
+ +
+``` + +You can pass additional props to adjust the icon. + +```html + +``` + +### Props + +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `stroke` | _Number_ | 2 | +| `class` | _String_ | | diff --git a/docs/icons/svg.mdx b/docs/icons/svg.mdx new file mode 100644 index 000000000..fe47c8188 --- /dev/null +++ b/docs/icons/svg.mdx @@ -0,0 +1,68 @@ +--- +title: SVG version +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## Usage + +All icons are built with SVG, so you can place them as ``, `background-image` and inline in HTML code. + +### HTML image + +If you load an icon as an image, you can modify its size using CSS. + +```html +icon title +``` + +### Inline HTML + +You can paste the content of the icon file into your HTML code to display it on the page. + +```html + + + ... + + Click me + +``` + +Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code. + +```css +.icon-tabler { + color: red; + width: 32px; + height: 32px; + stroke-width: 1.25; +} +``` + +## CDN + +```html + +``` + +### SVG sprite + +See the [SVG sprite version](../icons/sprite) diff --git a/docs/icons/vue.mdx b/docs/icons/vue.mdx new file mode 100644 index 000000000..4f6011559 --- /dev/null +++ b/docs/icons/vue.mdx @@ -0,0 +1,45 @@ +--- +title: Tabler Icons for Vue +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-vue.png) + +## Installation + + + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +## How to use + +All icons are Vue components that contain SVG elements. So any icon can be imported and used as a component. It also helps to use threeshaking, so you only import the icons you use. + +```vue + + + +``` + +You can pass additional props to adjust the icon. + +```html + +``` + +### Props + +| name | type | default | +| ------------- | -------- | ------------ | +| `size` | _Number_ | 24 | +| `color` | _String_ | currentColor | +| `stroke` | _Number_ | 2 | + diff --git a/docs/icons/webfont.mdx b/docs/icons/webfont.mdx new file mode 100644 index 000000000..c8d2b5654 --- /dev/null +++ b/docs/icons/webfont.mdx @@ -0,0 +1,52 @@ +--- +title: Webfont +--- + +![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-webfont.png) + +## Installation + +``` +yarn add @tabler/icons-webfont +``` + +or + +``` +npm install @tabler/icons-webfont +``` + +or + +``` +pnpm install @tabler/icons-webfont +``` + +or just [download from Github](https://github.com/tabler/tabler-icons/releases). + +### CDN + +```html + +``` + +## Usage + +### HTML + +```html + +``` + +### CSS + +```css +content: 'ec8f'; +``` + + +### SCSS + +```scss +content: $ti-icon-brand-tabler; +```