This is the home for Dialtone icons. It includes the resources needed to implement icons on your application that conform to Dialpad’s design principles and best practices.
To add Dialtone icons into your project, you can install it via NPM:
npm install --save @dialpad/dialtone-icons
Once installed, you can import icons in a couple different ways:
- Individually (tree-shakeable):
// named import (preferred on vite)
import { DtIconAccessibility } from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import { DtIconAccessibility } from '@dialpad/dialtone-icons/vue3'; // Vue 3+
// default import (preferred on webpack)
import DtIconAccessibility from '@dialpad/dialtone-icons/vue2/accessibility'; // Vue 2.6+
import DtIconAccessibility from '@dialpad/dialtone-icons/vue3/accessibility'; // Vue 3+
- All the icon components:
import * as icons from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import * as icons from '@dialpad/dialtone-icons/vue3'; // Vue 3+
- Importing icon related data
import keywords from '@dialpad/dialtone-icons/keywords-icons.json';
import iconsList from '@dialpad/dialtone-icons/icons.json';
If you need to add icons, follow the next steps to get your icons committed.
- Place the
.svg
files intosrc/svg/icons
inside the category folder. - Run
nx build dialtone-icons
- Commit and push your changes.
Requesting a feature or reporting a bug? Please do so at the below links:
Please also feel free to contact us via the #dialtone Dialpad channel with any questions.
Illustrations are also part of dialtone-icons package. It includes the resources needed to implement illustrations on your application that conform to Dialpad’s design principles and best practices.
To add Dialtone illustrations into your project, you can install it via NPM:
npm install --save @dialpad/dialtone-icons
Once installed, you can import illustrations in a couple different ways:
- Individually (tree-shakeable):
// named import (preferred on vite)
import { DtIllustrationMind } from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import { DtIllustrationMind } from '@dialpad/dialtone-icons/vue3'; // Vue 3+
// default import (preferred on webpack)
import DtIllustrationMind from '@dialpad/dialtone-icons/vue2/mind'; // Vue 2.6+
import DtIllustrationMind from '@dialpad/dialtone-icons/vue3/mind'; // Vue 3+
- All the illustrations components:
import * as illustrations from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import * as illustrations from '@dialpad/dialtone-icons/vue3'; // Vue 3+
- Importing illustration related data
import keywords from '@dialpad/dialtone-icons/keywords-illustrations.json';
import illustrationsList from '@dialpad/dialtone-icons/illustrations.json';
If you need to add illustrations, follow the next steps to get your icons committed.
- Place the
.svg
files intosrc/svg/illustrations
inside the category folder. - Run
nx build dialtone-icons
- Commit and push your changes.
Requesting a feature or reporting a bug? Please do so at the below links: