TDesign Icons for Vue 3

0.4.4 · active · verified Sun Apr 19

tdesign-icons-vue-next is an icon library specifically designed for Vue 3 applications, providing a comprehensive set of icons consistent with the TDesign design system. Its current stable version is 0.4.4. The library offers multiple integration strategies, allowing developers to choose between SVG sprite-based icons (`Icon`), IconFont-based icons (`IconFont`), or importing individual icon components (e.g., `CloseIcon`) for optimized bundle sizes. This flexibility is a key differentiator, catering to various project needs and performance considerations. While a specific release cadence isn't published, icon libraries typically follow a slower, feature-driven update cycle, ensuring stability for long-term projects. It serves as an essential companion for developers building applications with the TDesign UI framework in Vue 3 environments.

Common errors

```
Failed to resolve component: Icon
```
cause The 'Icon' component was not correctly registered with Vue, or the import path is wrong.

fix Ensure you have `import { Icon } from 'tdesign-icons-vue-next';` at the top of your script and it's included in the `components` option of your Vue component.
```
Property 'name' does not exist on type 'VNodeProps | null | undefined'.
```
cause This TypeScript error indicates that you're trying to use a component or prop (`name`) that isn't recognized, possibly due to incorrect import or version mismatch.

fix Verify that you are importing the correct `Icon` or `IconFont` component and that your Vue and `tdesign-icons-vue-next` versions are compatible and correctly set up for TypeScript.
```
Unknown icon name 'my-custom-icon'
```
cause The icon name provided to the `Icon` or `IconFont` component (or as a direct component name) does not exist in the TDesign icon library.

fix Check the official TDesign icon documentation for the exact names of available icons. Custom icons would require extending the library or integrating them separately.

Warnings

breaking This package is specifically for Vue 3. Migrating from a Vue 2 based TDesign icon solution will require updating package names (e.g., `tdesign-icons-vue` to `tdesign-icons-vue-next`) and potentially component usage patterns.
Fix: Ensure your project is running Vue 3 (>=3.0.0) and update package names and imports accordingly to `tdesign-icons-vue-next`.
gotcha When using the `Icon` or `IconFont` components, ensure the `name` prop corresponds to a valid icon name provided by the TDesign icon set. Typos or incorrect names will result in a missing icon.
Fix: Refer to the TDesign icon documentation or the package's source for a complete list of available icon names.
gotcha Different import strategies (`Icon` for SVG sprites vs. individual icon components) have implications for bundle size and tree-shaking. Importing individual icon components generally leads to smaller bundles if you use a limited set of icons.
Fix: For applications using a large number of icons, `Icon` or `IconFont` might be simpler. For highly optimized bundles using only a few icons, prefer direct imports like `import { CloseIcon } from 'tdesign-icons-vue-next';`

Install

npm install tdesign-icons-vue-next npm
yarn add tdesign-icons-vue-next yarn
pnpm add tdesign-icons-vue-next pnpm

Imports

Icon
wrong:
```
import Icon from 'tdesign-icons-vue-next';
```
correct:
```
import { Icon } from 'tdesign-icons-vue-next';
```
Used for SVG sprite based icon rendering via the 'name' prop. Incorrectly importing as a default will fail.
IconFont
wrong:
```
const IconFont = require('tdesign-icons-vue-next').IconFont;
```
correct:
```
import { IconFont } from 'tdesign-icons-vue-next';
```
Used for IconFont based icon rendering via the 'name' prop. CommonJS `require` is generally not idiomatic for Vue 3 projects.
CloseIcon
wrong:
```
import { Icon } from 'tdesign-icons-vue-next'; <Icon name="close" />
```
correct:
```
import { CloseIcon } from 'tdesign-icons-vue-next';
```
For optimal tree-shaking, individual icons can be imported as named components. Do not confuse with the generic 'Icon' component.

Quickstart

This quickstart demonstrates the three primary ways to use TDesign icons in a Vue 3 component: using the generic Icon component for SVG sprites, the IconFont component, and importing individual icon components.

import { defineComponent } from 'vue';
import { Icon, IconFont, CloseIcon, TimeIcon } from 'tdesign-icons-vue-next';

export default defineComponent({
  components: {
    Icon,
    IconFont,
    CloseIcon,
    TimeIcon
  },
  setup() {
    return {};
  },
  template: `
    <div>
      <h2>SVG Sprite Icons</h2>
      <Icon name="close" size="medium" />
      <Icon name="time" size="medium" />
      <p>Using the generic Icon component with a 'name' prop for SVG sprites.</p>

      <h2>IconFont Icons</h2>
      <IconFont name="star" size="medium" />
      <IconFont name="add" size="medium" />
      <p>Using the IconFont component with a 'name' prop.</p>

      <h2>Individual Icon Components</h2>
      <CloseIcon size="medium" />
      <TimeIcon size="medium" />
      <p>Directly importing and rendering specific icon components for better tree-shaking.</p>
    </div>
  `
});

view raw JSON →