{"id":12503,"library":"vue-icons-plus","title":"Vue Icons Plus","description":"Vue Icons Plus is a comprehensive collection of over 50,000 SVG icons from popular icon libraries, designed for easy integration into Vue.js projects. Supporting Vue 3 and Vue 2.7+, it allows developers to import and use icons directly as components. The package, currently at version 0.1.9, follows a modular import structure where icons are accessed from subdirectories corresponding to their original icon pack (e.g., `vue-icons-plus/fa` for Font Awesome). This design minimizes bundle size by only including the necessary icons. Its release cadence appears to be ad-hoc based on bug fixes and new icon pack additions. Key differentiators include its vast selection of icons and explicit support for both modern Vue setups and older Webpack environments through separate `@vue-icons-plus/sfc-X` packages, although these have install time trade-offs.","status":"active","version":"0.1.9","language":"javascript","source_language":"en","source_url":"https://github.com/vue-icons-plus/vue-icons-plus","tags":["javascript","Vue.js","SVG","vue-icons","vue-icons-plus","vue-components","icons","typescript"],"install":[{"cmd":"npm install vue-icons-plus","lang":"bash","label":"npm"},{"cmd":"yarn add vue-icons-plus","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-icons-plus","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js component integration.","package":"vue","optional":false}],"imports":[{"note":"Icons are named exports from specific sub-paths corresponding to icon families (e.g., `fa` for Font Awesome). Incorrectly importing as a default or using CommonJS `require` in modern environments will fail. This pattern applies to all icon families like `bi`, `md`, etc.","wrong":"import FaBeer from 'vue-icons-plus/fa';\nconst { FaBeer } = require('vue-icons-plus/fa');","symbol":"FaBeer","correct":"import { FaBeer } from 'vue-icons-plus/fa';"},{"note":"It is crucial to import icons from their specific sub-path (e.g., `/bi` for Bootstrap Icons) rather than the root package or attempting default imports. This ensures tree-shaking and correct component resolution.","wrong":"import { BiSearch } from 'vue-icons-plus';\nimport BiSearch from 'vue-icons-plus/bi';","symbol":"BiSearch","correct":"import { BiSearch } from 'vue-icons-plus/bi';"},{"note":"For projects using older Webpack versions (3 or 4) or large applications needing specific splits, icons are default exports from `@vue-icons-plus/sfc-X` packages. The full path to the component file is required, and named imports will not work.","wrong":"import { FaBeer } from '@vue-icons-plus/sfc-1/fa/FaBeer';","symbol":"FaBeer (Webpack 3/4)","correct":"import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';"}],"quickstart":{"code":"<script setup lang=\"ts\">\n  import { FaBeer } from \"vue-icons-plus/fa\";\n  import { BiSearch } from \"vue-icons-plus/bi\";\n  import { MdHome } from \"vue-icons-plus/md\"; // Assuming MdHome exists in Material Design pack\n</script>\n\n<template>\n  <div class=\"icon-showcase\">\n    <h1>My Icon Showcase</h1>\n    <p>Enjoy a refreshing beer:</p>\n    <FaBeer class=\"icon large-icon\" />\n\n    <p>Search for something great:</p>\n    <BiSearch class=\"icon medium-icon\" />\n\n    <p>Go back home:</p>\n    <MdHome class=\"icon small-icon\" />\n\n    <p>These icons are imported directly and rendered as SVG components in Vue 3.</p>\n  </div>\n</template>\n\n<style>\n.icon-showcase {\n  font-family: sans-serif;\n  padding: 20px;\n  text-align: center;\n}\n.icon {\n  display: inline-block;\n  vertical-align: middle;\n  margin: 10px;\n  color: #3498db; /* Example color */\n}\n.large-icon { font-size: 3em; }\n.medium-icon { font-size: 2em; }\n.small-icon { font-size: 1.5em; }\n</style>","lang":"typescript","description":"Demonstrates importing and using multiple icons from different families (Font Awesome, Bootstrap Icons, Material Design) as components in a Vue 3 setup with `<script setup>`."},"warnings":[{"fix":"Ensure your import statements target the correct sub-path: `import { IconName } from 'vue-icons-plus/icon-family-code';`","message":"Always import icon components from their specific icon family sub-paths (e.g., `vue-icons-plus/fa`, `vue-icons-plus/bi`). Attempting to import directly from the root `vue-icons-plus` package will result in undefined components or import errors, as the main package does not export individual icons directly.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For Vue 2.7+: `export default { components: { FaBeer } }`. For Vue 3, typically no extra step is needed after import in `<script setup>`.","message":"When using `vue-icons-plus` with Vue 2.7+, icon components must be explicitly registered within the `components` option of your Vue component. This manual registration step is typically not required for Vue 3 projects due to its automatic component resolution.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If encountering installation issues or performance bottlenecks with the main package in older environments, consider using `npm install @vue-icons-plus/sfc-X` and adjust imports to `import IconName from '@vue-icons-plus/sfc-X/family/IconName';`. Be aware of the increased installation duration.","message":"For projects constrained by older bundler environments (e.g., Webpack 3 or 4) or very large projects, `vue-icons-plus` offers split packages (`@vue-icons-plus/sfc-1`, `@vue-icons-plus/sfc-2`, etc.). These packages have a significantly longer installation time and require different import paths (e.g., `import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';`).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"When using `@vue-icons-plus/sfc-X` packages, always use default imports with the full component path: `import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';`","message":"The separate `@vue-icons-plus/sfc-X` packages, while solving 'npm restrictions' for older bundlers, export icons as default components from their specific file paths. Using named imports (e.g., `import { FaBeer } from ...`) with these packages will lead to `undefined` imports or runtime errors.","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":"Verify that your import statement includes the specific icon family sub-path, e.g., `import { FaBeer } from 'vue-icons-plus/fa';` instead of `import { FaBeer } from 'vue-icons-plus';`","cause":"Attempting to import an icon component directly from the root `vue-icons-plus` package or a non-existent sub-path, rather than the correct icon family directory.","error":"This dependency was not found: * in ./node_modules/vue-icons-plus/..."},{"fix":"For Vue 2.7+, ensure components are explicitly registered: `export default { components: { FaBeer } }`. For both Vue 2.7+ and Vue 3, double-check the import path for the icon component, especially the icon family sub-path.","cause":"The icon component was imported but not correctly registered or resolved in a Vue 2.7+ environment, or an incorrect import path was used.","error":"Error: [Vue warn]: Failed to resolve component: FaBeer If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."}],"ecosystem":"npm"}