Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`@unocss/preset-icons`: no corresponding CSS is generated when the icon attribute is passed to components through props.

See original GitHub issue

I encapsulate an Icon component and pass the icon attribute with Vue props, but I don’t see the icon, finally, I find the CSS is not generated. After many attempts, I find that only full icon value (It also includes comments. e.g. ) that appear in the current component can be detected and CSS generated accordingly.

Please click here for an example

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

userquincommented, Aug 1, 2022

you’re trying to add vue bind to unocss attributify, you need to add them to safelist, or just map any used icon in the parent component (or in the component itself).

For example, I have this in the script setup:

const icons: Record<string, string> = {
  '/supervision': 'i-mdi:archive-search',
  '/procesos': 'i-mdi:archive',
  '/gestion-administrativa': 'i-mdi:archive-cog',
  '/procesos-asignacion': 'i-mdi:archive-check',
  '/mis-procesos': 'i-mdi:archive-lock',
}

const iconsVisita: Record<ActaType, string> = {
  otros: 'i-mdi:leaf',
  alimentos: 'i-mdi:food-variant',
  medicamentos: 'i-medical-icon:health-services',
}

const icon = computed(() => {
  return icons[back.value] ?? 'i-mdi:archive'
})

const iconVisita = computed(() => {
  const actaType = lookupActaType(heading.value?.ivcType ?? 0) ?? 'otros'
  return iconsVisita[actaType] ?? iconsVisita.otros
})

and then I use the icon in the component (template)

imagen

0reactions

antfucommented, Aug 12, 2022

Yeah, it’s just how UnoCSS works. https://github.com/unocss/unocss#scanning

Top Results From Across the Web

How To Customize React Components with Props

In this tutorial, you'll create custom components by passing props to your component. Props are arguments that you provide to a JSX element....

Test Renderer - React

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM...

React Components - W3Schools

Components can be passed as props , which stands for properties. Props are like function arguments, and you send them into the component...

Styles - React Select

Examples. Styles. React Select offers 3 main APIs for styling: The styles prop; The classNames prop; The classNamePrefix prop. The styles prop.

How to include a Font Awesome icon in React's render()

And finally, use the <FontAwesome /> component and pass in attributes to specify icon and styling: var MyComponent = React.createClass({ render: function ...