This is the home for Dialtone icons and illustrations. It includes the resources needed to implement icons and illustrations 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 and illustrations 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+
import { DtIllustrationBlankSpace } from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import { DtIllustrationBlankSpace } 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+
import DtIllustrationBlankSpace from '@dialpad/dialtone-icons/vue2/blank-space'; // Vue 2.6+
import DtIllustrationBlankSpace from '@dialpad/dialtone-icons/vue3/blank-space'; // Vue 3+
- All the icon components:
import { icons } from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import { icons } from '@dialpad/dialtone-icons/vue3'; // Vue 3+
- All the illustration components:
import { illustrations } from '@dialpad/dialtone-icons/vue2'; // Vue 2.6+
import { illustrations } 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.js';
- Importing illustration related data
import keywords from '@dialpad/dialtone-icons/keywords-illustrations.json';
import illustrationsList from '@dialpad/dialtone-icons/illustrations.js';
-
Place the
.svg
files into the category folder inside these directory depending if it's an icon or an illustration:- icon:
src/svg/icons
- illustration:
src/svg/illustrations
- icon:
-
Run
nx run dialtone-icons:build
-
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.