{"id":12123,"library":"tdesign-icons-vue-next","title":"TDesign Icons for Vue 3","description":"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.","status":"active","version":"0.4.4","language":"javascript","source_language":"en","source_url":"https://github.com/Tencent/tdesign-icons","tags":["javascript","typescript"],"install":[{"cmd":"npm install tdesign-icons-vue-next","lang":"bash","label":"npm"},{"cmd":"yarn add tdesign-icons-vue-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add tdesign-icons-vue-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering Vue 3 components.","package":"vue","optional":false}],"imports":[{"note":"Used for SVG sprite based icon rendering via the 'name' prop. Incorrectly importing as a default will fail.","wrong":"import Icon from 'tdesign-icons-vue-next';","symbol":"Icon","correct":"import { Icon } from 'tdesign-icons-vue-next';"},{"note":"Used for IconFont based icon rendering via the 'name' prop. CommonJS `require` is generally not idiomatic for Vue 3 projects.","wrong":"const IconFont = require('tdesign-icons-vue-next').IconFont;","symbol":"IconFont","correct":"import { IconFont } from 'tdesign-icons-vue-next';"},{"note":"For optimal tree-shaking, individual icons can be imported as named components. Do not confuse with the generic 'Icon' component.","wrong":"import { Icon } from 'tdesign-icons-vue-next'; <Icon name=\"close\" />","symbol":"CloseIcon","correct":"import { CloseIcon } from 'tdesign-icons-vue-next';"}],"quickstart":{"code":"import { defineComponent } from 'vue';\nimport { Icon, IconFont, CloseIcon, TimeIcon } from 'tdesign-icons-vue-next';\n\nexport default defineComponent({\n  components: {\n    Icon,\n    IconFont,\n    CloseIcon,\n    TimeIcon\n  },\n  setup() {\n    return {};\n  },\n  template: `\n    <div>\n      <h2>SVG Sprite Icons</h2>\n      <Icon name=\"close\" size=\"medium\" />\n      <Icon name=\"time\" size=\"medium\" />\n      <p>Using the generic Icon component with a 'name' prop for SVG sprites.</p>\n\n      <h2>IconFont Icons</h2>\n      <IconFont name=\"star\" size=\"medium\" />\n      <IconFont name=\"add\" size=\"medium\" />\n      <p>Using the IconFont component with a 'name' prop.</p>\n\n      <h2>Individual Icon Components</h2>\n      <CloseIcon size=\"medium\" />\n      <TimeIcon size=\"medium\" />\n      <p>Directly importing and rendering specific icon components for better tree-shaking.</p>\n    </div>\n  `\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure your project is running Vue 3 (>=3.0.0) and update package names and imports accordingly to `tdesign-icons-vue-next`.","message":"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.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Refer to the TDesign icon documentation or the package's source for a complete list of available icon names.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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';`","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The 'Icon' component was not correctly registered with Vue, or the import path is wrong.","error":"Failed to resolve component: Icon"},{"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.","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.","error":"Property 'name' does not exist on type 'VNodeProps | null | undefined'."},{"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.","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.","error":"Unknown icon name 'my-custom-icon'"}],"ecosystem":"npm"}