Compare commits
27 Commits
dev-css-pr
...
@tabler/co
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6d0271ad57 | ||
|
|
f29c911032 | ||
|
|
01ee740535 | ||
|
|
7d5d9bc847 | ||
|
|
776a85cf1a | ||
|
|
ac10f55405 | ||
|
|
d0f45a41f8 | ||
|
|
16a42ba330 | ||
|
|
f7d5b6a05e | ||
|
|
4376968bca | ||
|
|
dee2b8ad64 | ||
|
|
2c9a4dfb37 | ||
|
|
e46fec5050 | ||
|
|
f3c409ffc2 | ||
|
|
309ff40a48 | ||
|
|
eea2d38f39 | ||
|
|
876bec9db3 | ||
|
|
f06cce0300 | ||
|
|
e1931f8c37 | ||
|
|
c240b5ad21 | ||
|
|
baafe08d6e | ||
|
|
cba487f5b7 | ||
|
|
edbaa1eddd | ||
|
|
378fba89f5 | ||
|
|
b0a62b7cf5 | ||
|
|
1415820cb1 | ||
|
|
81a8738823 |
63
.build/reformat-mdx.mjs
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
import { readFileSync, writeFileSync } from 'node:fs';
|
||||||
|
import { join, dirname } from 'node:path';
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
import { sync } from 'glob';
|
||||||
|
import * as prettier from "prettier";
|
||||||
|
|
||||||
|
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||||
|
|
||||||
|
const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx'))
|
||||||
|
|
||||||
|
async function formatHTML(htmlString) {
|
||||||
|
try {
|
||||||
|
const formattedHtml = await prettier.format(htmlString, {
|
||||||
|
parser: "html",
|
||||||
|
printWidth: 100,
|
||||||
|
});
|
||||||
|
return formattedHtml;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error formatting HTML:", error);
|
||||||
|
return htmlString; // Return original in case of an error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function replaceAsync(str, regex, asyncFn) {
|
||||||
|
const matches = [...str.matchAll(regex)];
|
||||||
|
|
||||||
|
const replacements = await Promise.all(
|
||||||
|
matches.map(async (match) => asyncFn(...match))
|
||||||
|
);
|
||||||
|
|
||||||
|
let result = str;
|
||||||
|
matches.forEach((match, i) => {
|
||||||
|
result = result.replace(match[0], replacements[i]);
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const file of docs) {
|
||||||
|
const oldContent = readFileSync(file, 'utf8')
|
||||||
|
|
||||||
|
// get codeblocks from markdown
|
||||||
|
const content = await replaceAsync(oldContent, /(```([a-z0-9]+).*?\n)(.*?)(```)/gs, async (m, m1, m2, m3, m4) => {
|
||||||
|
if (m2 === 'html') {
|
||||||
|
m3 = await formatHTML(m3);
|
||||||
|
|
||||||
|
// remove empty lines
|
||||||
|
m3 = m3.replace(/^\s*[\r\n]/gm, '');
|
||||||
|
|
||||||
|
return m1 + m3.trim() + "\n" + m4;
|
||||||
|
}
|
||||||
|
return m.trim();
|
||||||
|
})
|
||||||
|
|
||||||
|
if (content !== oldContent) {
|
||||||
|
writeFileSync(file, content, 'utf8')
|
||||||
|
console.log(`Reformatted ${file}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Add Playwright configuration and visual regression tests
|
|
||||||
@@ -6,7 +6,5 @@
|
|||||||
"linked": [],
|
"linked": [],
|
||||||
"access": "public",
|
"access": "public",
|
||||||
"baseBranch": "main",
|
"baseBranch": "main",
|
||||||
"ignore": [
|
"ignore": []
|
||||||
"preview"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix overflow of `label` in a `floating-input`
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Enable `scrollSpy` in `countup` module
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Refactor SCSS files to replace divide function with calc
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Add segmented control component
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Add new text features page with mentions: user, color and app.
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"preview": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix timeline card layout and profile header styles
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Add Scroll Spy page
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
---
|
|
||||||
---
|
|
||||||
|
|
||||||
Refactor bundlewatch workflow to use Turbo
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Update border radius variables for consistency across components
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix size of `apexcharts` tooltip marker
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix apexcharts heatmap example in docs
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Update color utility classes and replace background colors in pricing table
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"preview": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix broken "top pages" table
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix negative margins in `.navbar-bordered` variant
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"preview": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Update and simplify main menu
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Use the full license agreement for illustrations in docs
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Improve documentation for buttons
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix vertical alignment in single page and error layouts
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix spelling and improve grammar in the documentation
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": "minor"
|
|
||||||
---
|
|
||||||
|
|
||||||
Add documentation for segmented control component
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": minor
|
|
||||||
---
|
|
||||||
|
|
||||||
Add new payment provider (Troy)
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Fixed missing image in the README and Getting Started page
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix `.avatar-upload` double borders
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
"@tabler/core": patch
|
|
||||||
---
|
|
||||||
|
|
||||||
Fixes navbar styles with new hover effects and color variables
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
---
|
|
||||||
---
|
|
||||||
|
|
||||||
Update `robots.txt` handling and improve sitemap URL generation
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
---
|
|
||||||
---
|
|
||||||
|
|
||||||
Add section comments and format HTML for improved readability
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Fix instruction for CDN icons version
|
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
name: Playwright Tests
|
name: Argos Tests
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
@@ -6,8 +6,11 @@ on:
|
|||||||
- dev
|
- dev
|
||||||
pull_request:
|
pull_request:
|
||||||
paths:
|
paths:
|
||||||
- 'preview/**'
|
- 'preview/**/*.js'
|
||||||
- 'core/**'
|
- 'preview/**/*.html'
|
||||||
|
- 'preview/**/*.scss'
|
||||||
|
- 'core/**/*.js'
|
||||||
|
- 'core/**/*.scss'
|
||||||
|
|
||||||
env:
|
env:
|
||||||
NODE: 20
|
NODE: 20
|
||||||
@@ -19,6 +22,7 @@ jobs:
|
|||||||
test:
|
test:
|
||||||
timeout-minutes: 60
|
timeout-minutes: 60
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
if: github.event.pull_request.draft == false
|
||||||
steps:
|
steps:
|
||||||
- name: Clone repository
|
- name: Clone repository
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
'use strict'
|
|
||||||
|
|
||||||
import { readFileSync, writeFileSync } from 'node:fs';
|
|
||||||
import { join, dirname } from 'node:path';
|
|
||||||
import { fileURLToPath } from 'node:url'
|
|
||||||
import { sync } from 'glob';
|
|
||||||
import beautify from 'js-beautify';
|
|
||||||
|
|
||||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
|
||||||
|
|
||||||
const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx'))
|
|
||||||
|
|
||||||
docs.forEach((file, i) => {
|
|
||||||
const oldContent = readFileSync(file, 'utf8')
|
|
||||||
|
|
||||||
// get codeblocks from markdown
|
|
||||||
const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
|
|
||||||
if (m2 === 'html') {
|
|
||||||
// m3 = beautify.default.html(m3, {
|
|
||||||
// "indent_size": 2,
|
|
||||||
// "indent_char": " ",
|
|
||||||
// }).trim();
|
|
||||||
|
|
||||||
// remove empty lines
|
|
||||||
m3 = m3.replace(/^\s*[\r\n]/gm, '');
|
|
||||||
|
|
||||||
return m1 + m3 + "\n" + m4;
|
|
||||||
}
|
|
||||||
return m
|
|
||||||
})
|
|
||||||
|
|
||||||
if (content !== oldContent) {
|
|
||||||
writeFileSync(file, content, 'utf8')
|
|
||||||
console.log(`Reformatted ${file}`)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
39
core/CHANGELOG.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
# @tabler/core
|
||||||
|
|
||||||
|
## 1.1.1
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- f29c911: Fix Documentation structure
|
||||||
|
|
||||||
|
## 1.1.0
|
||||||
|
|
||||||
|
### Minor Changes
|
||||||
|
|
||||||
|
- a2640e2: Add Playwright configuration and visual regression tests
|
||||||
|
- d3ae77c: Enable `scrollSpy` in `countup` module
|
||||||
|
- bd3d959: Refactor SCSS files to replace divide function with calc
|
||||||
|
- cb278c7: Add Segmented Control component
|
||||||
|
- b47725d: Add new text features page with mentions: user, color and app.
|
||||||
|
- b4b4d1a: Add Scroll Spy page
|
||||||
|
- 9cd5327: Update border radius variables for consistency across components
|
||||||
|
- 4376968: Add Signature Pad feature and signatures page
|
||||||
|
- f95f250: Update color utility classes and replace background colors in pricing table
|
||||||
|
- eaa7f81: Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
|
||||||
|
- ea14462: Add documentation for segmented control component
|
||||||
|
- 1edaff4: Add new payment provider (Troy)
|
||||||
|
- edbaa1e: Add selectable table functionality with active background color
|
||||||
|
- 378fba8: Refactor badge styles, remove Bootstrap styles
|
||||||
|
- f3c409f: Refactor alert component styles and markup, remove Bootstrap styles
|
||||||
|
- c240b5a: Refactor accordion component styles and markup, remove Bootstrap styles
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- 687267d: Fix overflow of `label` in a `floating-input`
|
||||||
|
- 06b1dec: Fix size of `apexcharts` tooltip marker
|
||||||
|
- afd0700: Fix apexcharts heatmap example in docs
|
||||||
|
- 78383ef: Fix negative margins in `.navbar-bordered` variant
|
||||||
|
- 11f4487: Use the full license agreement for illustrations in docs
|
||||||
|
- b28ce9f: Fix vertical alignment in single page and error layouts
|
||||||
|
- 24b944c: Fix `.avatar-upload` double borders
|
||||||
|
- ca4ba14: Fixes navbar styles with new hover effects and color variables
|
||||||
14
core/docs/emails/index.mdx
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: Tabler Emails
|
||||||
|
seoTitle: Tabler Emails - premium email templates
|
||||||
|
order: 4
|
||||||
|
description: Customizable email templates for over 90 clients and devices.
|
||||||
|
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Tabler Emails
|
||||||
|
|
||||||
|
*Change below image!*
|
||||||
|
|
||||||
|

|
||||||
29
core/docs/emails/introduction/compiled-html.mdx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
title: Compiled templates
|
||||||
|
order: 2
|
||||||
|
seoTitle: Tabler Emails - How to use the compiled HTML email templates
|
||||||
|
description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
|
||||||
|
summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||||
|
seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Compiled version of the template
|
||||||
|
|
||||||
|
If you only want to change a content - text or images - of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
|
||||||
|
|
||||||
|
## How to modify the compiled HTML files
|
||||||
|
|
||||||
|
1. Open the `compiled.html` file in your favorite code editor.
|
||||||
|
2. Find the content you want to change inside the `<body>` element.
|
||||||
|
3. Modify the content as needed:
|
||||||
|
* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
|
||||||
|
* Change the images by replacing the `src` attribute of the `<img>` tag.
|
||||||
|
* Change the links by replacing the `href` attribute of the `<a>` tag.
|
||||||
|
* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
|
||||||
|
4. If you changed the images, make sure to replace them in the `assets/` folder.
|
||||||
|
5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
|
||||||
|
|
||||||
|
## How to use the compiled HTML files
|
||||||
|
|
||||||
|
After changing the templates as needed, you can use them in your email campaigns.
|
||||||
|
The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
|
||||||
63
core/docs/emails/introduction/contents.mdx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
---
|
||||||
|
title: Contents
|
||||||
|
order: 1
|
||||||
|
seoTitle: Tabler Emails - Content of the package
|
||||||
|
description: Content of the Tabler Emails package.
|
||||||
|
summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
|
||||||
|
seoDescription: todo
|
||||||
|
---
|
||||||
|
|
||||||
|
## Folder structure
|
||||||
|
|
||||||
|
Once you unzip the downloaded file, you will see the following structure:
|
||||||
|
|
||||||
|
```
|
||||||
|
tabler-emails/
|
||||||
|
├── emails/
|
||||||
|
| ├── absence/
|
||||||
|
| | ├── assets/
|
||||||
|
| | ├── compiled.html
|
||||||
|
| | ├── compiled-dark.html
|
||||||
|
| | ├── source.html
|
||||||
|
| | ├── source-dark.html
|
||||||
|
| | ├── screenshot.jpg
|
||||||
|
| | ├── screenshot-dark.jpg
|
||||||
|
| | ├── screenshot-mobile.jpg
|
||||||
|
| | └── screenshot-mobile-dark.jpg
|
||||||
|
| ├── access-token/
|
||||||
|
| ├── account-deleted/
|
||||||
|
| ├── .../
|
||||||
|
| ├── welcome/
|
||||||
|
| └── whishlist/
|
||||||
|
├── images/
|
||||||
|
| ├── chart-donuts/
|
||||||
|
| ├── icons/
|
||||||
|
| ├── illustrations/
|
||||||
|
| └── overlays/
|
||||||
|
├── license.txt
|
||||||
|
└── readme.html
|
||||||
|
```
|
||||||
|
|
||||||
|
## Understanding the file structure in Tabler Emails
|
||||||
|
|
||||||
|
The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
|
||||||
|
|
||||||
|
### 1. Email Templates: `emails/`
|
||||||
|
This folder contains <EmailsCount /> email subfolders, each with a specific template. Each email folder contains the following files:
|
||||||
|
* Compiled HTML files for light and dark themes. Read more about its usage in the [Compiled HTML](/docs/emails/compiled-html) section.
|
||||||
|
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
|
||||||
|
* Screenshot images for desktop and mobile views.
|
||||||
|
* Assets folder with images used in the email template and the CSS file with styles
|
||||||
|
|
||||||
|
### 2. Images: `images/`
|
||||||
|
It contains 4 subfolders with images used across the different email templates:
|
||||||
|
* `chart-donuts/`: Images of donut charts with different fill.
|
||||||
|
* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
|
||||||
|
* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
|
||||||
|
* `overlays/`: overlay images used in the email templates.
|
||||||
|
|
||||||
|
### 3. License: `license.txt`
|
||||||
|
This file contains the license information for the Tabler Emails package.
|
||||||
|
|
||||||
|
### 4. Readme: `readme.html`
|
||||||
|
This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.
|
||||||
9
core/docs/emails/introduction/index.mdx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: Introduction
|
||||||
|
seoTitle: Introduction to Tabler Emails
|
||||||
|
description: Base information about Tabler Emails package.
|
||||||
|
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
26
core/docs/emails/introduction/source-html.mdx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
---
|
||||||
|
title: Source templates
|
||||||
|
order: 3
|
||||||
|
seoTitle: Tabler Emails - How to use the source HTML email templates
|
||||||
|
description: Learn how to use the source HTML email templates from the Tabler Emails package.
|
||||||
|
summary: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
|
||||||
|
seoDescription: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
|
||||||
|
---
|
||||||
|
|
||||||
|
## Source version of the template
|
||||||
|
|
||||||
|
If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
|
||||||
|
|
||||||
|
## How to modify the source HTML files
|
||||||
|
|
||||||
|
1. Open the `source.html` file in your favorite code editor.
|
||||||
|
2. Open the `theme.css` file from `assets/`* directory in the same editor.
|
||||||
|
3. Change all the content and styles as needed.
|
||||||
|
4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, like:
|
||||||
|
* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
|
||||||
|
* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
|
||||||
|
5. Save the output HTML file.
|
||||||
|
|
||||||
|
## How to use the source HTML files
|
||||||
|
|
||||||
|
To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.
|
||||||
@@ -29,7 +29,7 @@ import { IconHeart } from '@tabler/icons-svelte';
|
|||||||
|
|
||||||
You can pass additional props to adjust the icon.
|
You can pass additional props to adjust the icon.
|
||||||
|
|
||||||
```html
|
```sveltehtml
|
||||||
<IconHeart size={48} stroke={1} />
|
<IconHeart size={48} stroke={1} />
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -30,7 +30,10 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
|||||||
### CDN
|
### CDN
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css">
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css"
|
||||||
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||||
@@ -29,7 +29,18 @@ You can paste the content of the icon file into your HTML code to display it on
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<a href="">
|
<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
|
||||||
|
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>
|
</svg>
|
||||||
Click me
|
Click me
|
||||||
1198
core/docs/illustrations/introduction/customization.mdx
Normal file
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 866 B After Width: | Height: | Size: 866 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 134 KiB After Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 131 KiB After Width: | Height: | Size: 131 KiB |
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |