🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@cypress-design/vue-icon

Package Overview
Dependencies
Maintainers
1
Versions
120
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cypress-design/vue-icon

## Install

1.28.0
latest
npm
Version published
Weekly downloads
3.2K
6.87%
Maintainers
1
Weekly downloads
 
Created
Source

Icon

Install

npm install @cypress-design/vue-icon

or with yarn

yarn add @cypress-design/vue-icon

Usage

import Icon from '@cypress-design/vue-icon'

Import

2 methods exist to load this component:

Use named imports of each icon you plan on using. I recommend this method because:

  • It's tree shakable: Only the icons you use will end up in your bundle
  • You get TS validation of color props: if a color is not available, squigles will appear in your editor
<script setup>
import { IconObjectBookCode } from '@cypress-design/vue-icon'
</script>

<template>
  <IconObjectBookCode />
</template>

Import the default Icon component and pass the name of the icon. It can be useful but you should avoid it in production unless you know what you are doing.

It has advantages:

  • Allows for quick browsing of the available icons right in the template
  • Allows passing ids around and delegating color and size until the implementation.

But drawbacks too:

  • it prevents tree shaking.
  • It uses TypeScript to check sizes and colors but with a twist:
    • If the size of the icon is not available for the icon selected and is available for another, the error will appear on the icon component instead of on the size prop.
<script setup>
import Icon from '@cypress-design/vue-icon'
</script>

<template>
  <Icon name="object-book-code" />
</template>

Colors

Should you need to change the color of the icon on hover or focus prefix the props with these words.

Here, the strokeColor will change on hover from indigo to jade

<script setup>
import { IconObjectBook } from '@cypress-design/vue-icon'
</script>

<template>
  <button class="flex items-center gap-[8px]">
    <IconObjectBook
      size="16"
      strokeColor="blue-600"
      hoverStrokeColor="jade-600"
    />Read
  </button>
</template>

If you need the hover or focus effect to be triggered on the parent group, use interactiveColorsOnGroup. This prop will change all the pseudo prefixes to be group focused instead of triggered by the icon itself.

To achieve the same goal, in WindiCSS, we would use group-hover: instead of hover:.

<script setup>
import { IconObjectBook } from '@cypress-design/vue-icon'
</script>

<template>
  <button class="group hover:text-jade-800 flex items-center gap-[8px]">
    <IconObjectBook
      size="16"
      strokeColor="blue-600"
      hoverStrokeColor="jade-600"
      interactiveColorsOnGroup
    />Read
  </button>
</template>

FAQs

Package last updated on 23 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts