vuejs / vuejs/devtools

Inspector icon setting not respected

Open
#918 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
279
PR merge metrics
No merged PRs in 30d

Description

vue v3.5.17
vuetools v7.7.7

I'm creating a devtool plugin and I'm trying to set the icon but whatever I put i the icon property, devtools shows the default icon (i-carbon-bring-forward)

api.addInspector({
   id: 'routable-inspector',
   label: 'Routable Objects',
   icon: 'direction', // <--- ignored
});

This code from pinia's plugin does the same but it seems to work. (Just to clarify, I tried the same icon name as pinia to no avail)

The vue component that takes care of the icon afaik is this one.

I deduced it from the fact that that's the only place where i-carbon-bring-forward is referenced in the project.

According to that component's logic one should be able to use a url to an svg, a custom icon or it would default to i-carbon-bring-forward

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/client/src/components/common/TabIcon.vue and reproduce the issue with the addInspector example using a custom icon value. Trace how the inspector's icon reaches this component, then verify that the configured icon is displayed instead of i-carbon-bring-forward.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
devtools, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.