{"id":12124,"library":"tdesign-icons-vue","title":"TDesign Icons for Vue 2","description":"tdesign-icons-vue provides a comprehensive set of icons specifically designed for Vue 2.x applications, serving as the official icon library within the TDesign enterprise design system. It offers flexibility in usage, allowing developers to import icons as SVG sprite components (Icon), icon font components (IconFont), or individual, tree-shakeable Vue components. The library is actively maintained as part of a mono-repo (`Tencent/tdesign-icons`), with a corresponding `tdesign-icons-vue-next` package available for Vue 3.x projects. The project observes a frequent release cadence, with regular patch and minor updates introducing new icons or optimizations, alongside occasional major version changes that may include icon renames or removals. Its key differentiators include tight integration with the TDesign ecosystem, multiple rendering options, and built-in TypeScript support.","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","lang":"bash","label":"npm"},{"cmd":"yarn add tdesign-icons-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add tdesign-icons-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering Vue 2 components.","package":"vue","optional":false}],"imports":[{"note":"Imports the SVG sprite component. Use named import. CommonJS require is not supported.","wrong":"const Icon = require('tdesign-icons-vue')","symbol":"Icon","correct":"import { Icon } from 'tdesign-icons-vue'"},{"note":"Imports the IconFont component for font-based icons. Requires additional CSS setup. Use named import.","wrong":"import IconFont from 'tdesign-icons-vue'","symbol":"IconFont","correct":"import { IconFont } from 'tdesign-icons-vue'"},{"note":"Imports a specific icon as a Vue component. This library supports tree-shaking, making direct import efficient.","wrong":"import { CloseIcon } from 'tdesign-icons-vue/es/close'","symbol":"CloseIcon","correct":"import { CloseIcon } from 'tdesign-icons-vue'"}],"quickstart":{"code":"import Vue from 'vue';\nimport { Icon, IconFont, CloseIcon, TimeIcon } from 'tdesign-icons-vue';\n\n// Globally register the SVG sprite icon component\nVue.component('TIcon', Icon);\n\n// Optionally, globally register the IconFont component\n// Vue.component('TIconFont', IconFont);\n\nnew Vue({\n  el: '#app',\n  components: { CloseIcon, TimeIcon, IconFont },\n  template: `\n    <div id=\"app\">\n      <h1>TDesign Icons for Vue 2</h1>\n      <h2>SVG Sprite Icon</h2>\n      <TIcon name=\"close\" size=\"24px\" style=\"color: #f00;\" />\n      <TIcon name=\"time\" size=\"32px\" style=\"color: #00f;\" />\n      \n      <h2>Icon Font (requires external CSS for font-face)</h2>\n      <!-- Ensure the iconfont CSS is loaded globally, e.g., in your main.js or index.html -->\n      <!-- Example: <link rel=\"stylesheet\" href=\"path/to/tdesign-iconfont.css\"> -->\n      <IconFont name=\"setting\" size=\"20px\" />\n      <IconFont name=\"file\" size=\"28px\" />\n\n      <h2>Individual Icon Components</h2>\n      <CloseIcon size=\"24px\" style=\"margin-left: 10px;\" />\n      <TimeIcon size=\"24px\" />\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates how to install and use TDesign icons in a Vue 2 application, showcasing global registration of SVG sprite icons, usage of the IconFont component (with a note about CSS), and direct import of individual icon components."},"warnings":[{"fix":"For Vue 3 projects, install `tdesign-icons-vue-next` (npm i tdesign-icons-vue-next). For Vue 2, ensure `tdesign-icons-vue` is installed.","message":"This package, `tdesign-icons-vue`, is specifically for Vue 2.x applications. For Vue 3.x, you must use `tdesign-icons-vue-next` instead. Using the wrong package will result in compatibility issues or runtime errors.","severity":"breaking","affected_versions":"All versions"},{"fix":"Always check the CHANGELOG or release notes before upgrading to identify any icon-related breaking changes. Update icon `name` props or imports as necessary.","message":"Icon names and availability can change between minor and major versions. Some icons may be renamed, removed, or have their definitions updated, potentially breaking existing usages, especially in major releases like 0.3.0.","severity":"breaking","affected_versions":">=0.3.0"},{"fix":"Include the TDesign icon font CSS in your project (e.g., in `main.js` or `index.html`) if you intend to use `IconFont`. Refer to TDesign's official documentation for the correct path.","message":"When using the `IconFont` component, you must ensure that the corresponding icon font CSS file (which defines the `@font-face` and icon classes) is properly loaded in your application. Without the CSS, icons will not render correctly.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Prioritize direct props for sizing and coloring individual icons. For global styling, ensure CSS specificity rules are understood, and consider using CSS variables or scoped styles.","message":"The `Icon` component (SVG sprite) and individual icon components can be customized with `size`, `color`, and `style` props. However, inconsistent application of these props or conflicting global styles can lead to unexpected visual results.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import { Icon } from 'tdesign-icons-vue';` is present and the component is registered: `components: { Icon }` or `Vue.component('TIcon', Icon);`.","cause":"The `Icon` component (or any specific icon component like `CloseIcon`) was used in a Vue template without being properly imported and registered in the component's `components` option or globally with `Vue.component()`.","error":"[Vue warn]: Unknown custom element: <Icon> - did you register the component correctly?"},{"fix":"Verify that the icon font CSS file (e.g., from TDesign's main package or a specific icon font distribution) is imported into your main application entry point (e.g., `main.js`) or linked in your `index.html`. For example: `import 'tdesign-vue/es/style/webcomponents.css'` (path may vary).","cause":"The CSS file containing the `@font-face` declaration and character mappings for the TDesign icon font is not loaded or is misconfigured.","error":"Icons not displaying, showing an empty box, or question mark characters when using <IconFont>"},{"fix":"Double-check the import path for individual icons. If using the general `<Icon>` component, ensure the `name` prop is provided and spelled correctly, matching an existing icon.","cause":"This typically occurs if a specific icon component (e.g., `CloseIcon`) is imported but somehow accessed incorrectly, or if `Icon` is used without a `name` prop where required, indicating the icon data is missing.","error":"TypeError: Cannot read properties of undefined (reading 'name') for an icon component."}],"ecosystem":"npm"}