Registry / web-framework / tdesign-icons-vue-next

tdesign-icons-vue-next

library0.4.4jsnpmunverified

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.

web-framework

npm install tdesign-icons-vue-next

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TDESIGN-ICONS-VUE-

tdesign-icons-vue-next

web-frameworkjavascriptv0.4.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Icon

✓ import { Icon } from 'tdesign-icons-vue-next';

✗ 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

✓ import { IconFont } from 'tdesign-icons-vue-next';

✗ const IconFont = require('tdesign-icons-vue-next').IconFont;

Used for IconFont based icon rendering via the 'name' prop. CommonJS `require` is generally not idiomatic for Vue 3 projects.

CloseIcon

✓ import { CloseIcon } from 'tdesign-icons-vue-next';

✗ import { Icon } from 'tdesign-icons-vue-next'; <Icon name="close" />

For optimal tree-shaking, individual icons can be imported as named components. Do not confuse with the generic 'Icon' component.

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> ` });

Debug

Known issues

breakingThis 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`.

affects: >=0.1.0

gotchaWhen 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.

affects: >=0.1.0

gotchaDifferent 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';`

affects: >=0.1.0

Errors

Common errors & fixes

Failed to resolve component: Icon

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'.

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'

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.

Upgrade

Version history

0.4.4latest on npm

Audit

Dependencies

vuerequiredPeer dependency for rendering Vue 3 components.

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/Tencent/tdesign-icons ↗

packagehttps://www.npmjs.com/package/tdesign-icons-vue-next ↗

homepagehttps://tdesign.tencent.com ↗