[Bug]: Problems with Vue Library and Icons

Package

@carbon/icons-vue

Browser

Chrome

Package version

10.49.1

React version

No response

Description

In my company, we have a library, that wrappers the carbon library for transferring a common style UI and for creating new UI components that reuse carbon components.

We discover that when you use your third library, the icons don’t display, at the beginning I think was a problem with dependencies but before digging deeper into your code I discover a failure in the function createSVGComponent here you lads are passing the name undefined and in the last version of @Carbon/vue you have two different conditionals and my source that is in UMD library is detecting my Vue like Vue3 instead of Vue2, with your change of master the problem is solved

"@carbon/vue": "^2.44.0",
"vue": "^2.6.14",

Master branch:

const h = getVueExport('h');
const createApp = getVueExport('createApp');
....
const createSVGComponent = (name, svgAttrs, svgContent) => ({
  // We use title as a prop name for the component
  // as it is not a valid attribute for an SVG HTML element
  props: { title: String },
  name: name,
  ...(createApp
    ? {

@Carbon/vue version

const h = getVueExport('h');
....
const createSVGComponent = (name, svgAttrs, svgContent) => ({
  // We use title as a prop name for the component
  // as it is not a valid attribute for an SVG HTML element
  props: { title: String },
  name: name,
  ...(h
    ? {
...

But in resume, my icons are not detected so when I use a Select or a Dropdown using a carbon library pack in a library, the icons is not printed

Reproduction/example

none

Steps to reproduce

• Create a vue library with carbon (package.json)

{
   "name": "@carbon/design-system",
   "version": "1.36.0",
   "main": "./dist/design-system.umd.js",
   "files": [
       "dist/*"
   ],
   "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "test:unit": "vue-cli-service test:unit",
       "test:e2e": "vue-cli-service test:e2e",
       "lint": "vue-cli-service lint",
       "lint-fix": "vue-cli-service lint --fix",
       "build-storybook": "build-storybook",
       "storybook": "start-storybook -s ./public -p 6006",
       "mv-scss": "cp-cli src/assets/scss dist/scss",
       "prepack": "npm ci && npm run generate-lib && npm run mv-scss",
       "generate-lib": "vue-cli-service build --target lib src/library.js",
       "test:unit:report": "JEST_JUNIT_OUTPUT_FILE='./tests/results/unit.xml' vue-cli-service test:unit --ci --reporters=default --reporters=jest-junit"
   },

(library.js)

import Vue from "vue";
import CarbonComponentsVue from "@carbon/vue/src/index";

import "../assets/scss/app.scss";

Vue.use(CarbonComponentsVue);

export default {
    install(Vue) {
        Vue.use(CarbonComponentsVue);
    }
}

• Pack the library npm pack
• Create a empty vue project install in local the library (in new package.json)

"dependencies" : {
  "@carbon/design-system": "file:/YOUR_PATH/file.tgz"
}

• Inject a component that use a select or a dropdown

Code of Conduct

• I agree to follow this project’s Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@RaulGF92 Sorry for the delay here! I was out sick most of last week.

It’s possible @carbon/vue hasn’t updated to the new version of @carbon/icons-vue. If you force @carbon/icons-vue to the latest version using resolutions key in your package.json (if using yarn, or overrides for npm) does it resolve?

cc @lee-chase

[RaulGF92]

Hello @tay1orjones, the error persists but we found new information:

• Mysteriously, we have an application where the icons are working nice, but in another, the icons are not working, the only difference between these applications is one was installed at a different time than the other.
• Literally, if you create a boilerplate of @Carbon/vue, the icons of the inputs doesn’t work, at beginning I thought the difference was between the Vue loaders because one use TS and another JS, but both doesn’t display the icons.

This is the script we use for the test:

---

• Create a boilerplate project
• Create test folder
  • vue create .
  • Vue2, JS, Vuex, Router
• Inject CarbonComponents
  • Install carbon vue

// in main.js
import 'carbon-components/css/carbon-components.css';
import CarbonComponentsVue from '@carbon/vue/src/index';
Vue.use(CarbonComponentsVue);

• Inject ComboBox component -> https://vue.carbondesignsystem.com/?path=/info/components-cvcombobox--default

And with it, tell me if you can see icons

---

You could see that with actual @Carbon/vue, SVG are displaying but path tag are empty without any data.