Socket
Socket
Sign inDemoInstall

@cypress-design/vue-icon

Package Overview
Dependencies
1
Maintainers
0
Versions
69
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cypress-design/vue-icon

## Install


Version published
Weekly downloads
1.6K
increased by149.62%
Maintainers
0
Created
Weekly downloads
 

Readme

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

Last updated on 02 Jul 2024

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc