Vue Icons Plus

Common errors

• This dependency was not found: * in ./node_modules/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.
  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';`

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

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

Warnings

• gotcha 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.
  Fix: Ensure your import statements target the correct sub-path: `import { IconName } from 'vue-icons-plus/icon-family-code';`
• gotcha 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.
  Fix: For Vue 2.7+: `export default { components: { FaBeer } }`. For Vue 3, typically no extra step is needed after import in `<script setup>`.
• gotcha 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';`).
  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.
• gotcha 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.
  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';`

Install

• npm install vue-icons-plus npm
• yarn add vue-icons-plus yarn
• pnpm add vue-icons-plus pnpm

Imports

• FaBeer
  wrong:

  import FaBeer from 'vue-icons-plus/fa';
  const { FaBeer } = require('vue-icons-plus/fa');

  correct:

  import { FaBeer } from 'vue-icons-plus/fa';

  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.
• BiSearch
  wrong:

  import { BiSearch } from 'vue-icons-plus';
  import BiSearch from 'vue-icons-plus/bi';

  correct:

  import { BiSearch } from 'vue-icons-plus/bi';

  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.
• FaBeer (Webpack 3/4)
  wrong:

  import { FaBeer } from '@vue-icons-plus/sfc-1/fa/FaBeer';

  correct:

  import FaBeer from '@vue-icons-plus/sfc-1/fa/FaBeer';

  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.

Quickstart

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

<script setup lang="ts">
  import { FaBeer } from "vue-icons-plus/fa";
  import { BiSearch } from "vue-icons-plus/bi";
  import { MdHome } from "vue-icons-plus/md"; // Assuming MdHome exists in Material Design pack
</script>

<template>
  <div class="icon-showcase">
    <h1>My Icon Showcase</h1>
    <p>Enjoy a refreshing beer:</p>
    <FaBeer class="icon large-icon" />

    <p>Search for something great:</p>
    <BiSearch class="icon medium-icon" />

    <p>Go back home:</p>
    <MdHome class="icon small-icon" />

    <p>These icons are imported directly and rendered as SVG components in Vue 3.</p>
  </div>
</template>

<style>
.icon-showcase {
  font-family: sans-serif;
  padding: 20px;
  text-align: center;
}
.icon {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
  color: #3498db; /* Example color */
}
.large-icon { font-size: 3em; }
.medium-icon { font-size: 2em; }
.small-icon { font-size: 1.5em; }
</style>