Loongship UI

Appearance

Icon 图标 ​

显示内置 SVG 图标，支持预设尺寸和颜色继承。

命令行安装 ​

bash
npx @loongship-kit/ui add icon

图标画廊 ​

航运10
ship
cargo-ship
anchor
shipping-truck
shipping-box
location
pin
map-pin
map-arrow-left
map-arrow-right
天气9
sunny
cloudy
bedtime
weather-zap
weather-wind
weather-hail
weather-rain
parasol
flower
文件7
document
document-add
folder
paperclip
file-done
documentation
menu-book
通用40
search
search-alt
add
plus
minus
check-minus
close
copy
code
loading
arrow-left
arrow-right
arrow-up
arrow-down
chevron-down
chevron-up
chevrons-down
chevrons-up
chevrons-left
chevrons-right
user-line
lock
lock-password
key
eye
eye-fill
eye-off
chat-unread
mail-read
mail-unread
flag
fire
time
calendar
trending
trending-up
trending-down
github
discord
social
查看代码
vue
<template>
  <div class="icon-gallery-toolbar">
    <div class="icon-size-selector">
      <button
        v-for="s in ['xs', 'sm', 'md', 'lg', 'xl']"
        :key="s"
        :class="['size-btn', { active: selectedSize === s }]"
        @click="selectedSize = s"
      >
        {{ s.toUpperCase() }}
      </button>
    </div>
  </div>
  <div class="icon-gallery-container">
    <div v-for="group in iconGroups" :key="group.title" class="icon-group">
      <div class="icon-group__header">
        <span class="icon-group__title">{{ group.title }}</span>
        <span class="icon-group__count">{{ group.icons.length }}</span>
      </div>
      <div class="icon-gallery-grid">
        <div
          v-for="name in group.icons"
          :key="name"
          class="icon-card"
          :title="`点击复制 <Icon name=&quot;${name}&quot; />`"
          @click="copyIconCode(name)"
        >
          <div class="icon-card__preview"><Icon :name="name" :size="selectedSize" /></div>
          <div class="icon-card__name">{{ name }}</div>
          <div v-if="copiedName === name" class="icon-card__copied">已复制!</div>
        </div>
      </div>
    </div>
  </div>
</template>

基础用法 ​

尺寸 ​

查看代码
vue
<template>
  <Icon name="ship" size="xs" />
  <Icon name="ship" size="sm" />
  <Icon name="ship" size="md" />
  <Icon name="ship" size="lg" />
  <Icon name="ship" size="xl" />
</template>

颜色继承与搭配 ​

图标默认继承父级 color，也可通过 color 属性指定：

查看代码
vue
<template>
  <!-- 继承父级 CSS 颜色 -->
  <div style="color: var(--vp-c-brand-1);">
    <Icon name="ship" size="lg" />
  </div>

  <!-- 通过 color 属性直接传递颜色 -->
  <Icon name="fire" size="lg" color="#ef4444" />
  <Icon name="anchor" size="lg" color="#10b981" />
</template>

扩充图标资源

内置图标不能满足需求时，请参阅新增图标资源，了解文件放置、SVG 清理和命名规范。

API ​

属性 ​

属性类型默认值说明
nameIconName-图标名称（对应 svg/ 目录下的文件名）
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'图标尺寸
colorstring-图标颜色 (指定 CSS 颜色值或变量，覆盖默认继承)
classClassValue-自定义类名

类型 ​

类型说明
IconPropsIcon 的公开 Props
IconName与内置 SVG 文件严格对应的名称类型
IconSize图标尺寸值

插槽 ​

无内容插槽；图标路径由 name 对应的内置 SVG 定义提供。