@seede/icon

SF Symbol Icons for Vue

Installation

This is a workspace package. Install it as a dependency in your app:

{
  "dependencies": {
    "@seede/icon": "workspace:^"
  }
}

Usage

Import CSS Styles

Important: You need to import the icon styles in your CSS file:

@import '@seede/icon/style.css';

Or in your main entry file:

import '@seede/icon/style.css';

Use Icon Components

<script setup>
import { SFArrowUturnBackward, SFArrowUturnForward } from '@seede/icon';
</script>

<template>
  <SFArrowUturnBackward class="text-[14px]" />
  <SFArrowUturnForward class="text-[14px]" />
</template>

### Styling Icons have a two-layer structure: - **Outer `
<i></i>

Option 2: Using width/height

You can also directly set width and height on the container:

<SFArrowUturnBackward class="w-6 h-6 text-blue-500" />
<SFArrowUturnBackward style="width: 20px; height: 20px;" />

The icon will automatically:

• Maintain its aspect ratio based on the viewBox
• Use currentColor for fill
• Center within the container

Regenerating Icons

Run the generation script after adding new SVG files:

pnpm prepare

This will process all SVG files in svgs/ and seede-svgs/ directories.

Icon Explorer (Search & Preview)

Run a local preview page to search and preview all icons:

pnpm --filter @seede/icon dev

Then open the Vite URL printed in your terminal (usually http://localhost:5173).