Icon 图标

Ksw vue icon 图标库是一个通过技术驱动矢量图标样式的图标库产品，可以实现根据单一SVG源文件导出为 Vue3 组件代码，打通 Design to Code 链路，实现产品、研发、设计师一站式对接，使用更高效。

使用方法

安装

使用图标组件，你需要安装 ksw-vue-icon 图标组件包：

npm

npm install ksw-vue-icon

yarn

yarn add ksw-vue-icon

pnpm

pnpm install ksw-vue-icon

bun

bun add ksw-vue-icon

全局注册图标

通过全局注册，可以直接在项目的vue文件中使用图标组件。

import { KswIcon } from 'ksw-vue-icon'
app.use(KswIcon)

按需注册图标（推荐）

由于图标库的图标数量比较多，如果项目中使用的图标比较少，我们更建议按需注册图标，这样可以减少编译代码量。

import { IconAdd } from 'ksw-vue-icon'
app.use(IconAdd)

使用import导入

也可以从 ksw-vue-icon 中直接导入一个图标，然后在模板标签中使用它。

// 引用
import { IconName } from 'ksw-vue-icon'


// 使用
<IconName :size="24" color="#333" />

引入样式

⚠️ 注意

2.6.0 + 版本会自动注入 CSS 不再需要导入样式, 并且不再提供 CSS 的导出

2.5 版本以下需要引入 CSS

导入图标样式（整个项目只需1次）:

import 'ksw-vue-icon/styles/icon.css';

项目用法

TIP

自 2.3.40 版本起图标库支持在全局注册时传入项目名称自动注册指定类别图标

您可以在 app.use 方法通过 projectName 参数传入项目名称来注册指定项目的图标

app.use(KswIcon, { projectName: 'KAPA' });

也可以传入一个项目名称的数组一次性注册多个项目的图标。

app.use(KswIcon, { projectName: ['Base', 'KAPA'] });

projectName	备注
Base	基本图标库
Animation	动画图标库
KAPA	KAPA项目图标库

别名图标

TIP

自 2.4.0 版本起图标库支持为图标设置别名

有时候因为业务需求，我们可能需要一个图标对应多个名称。在 icons-config.json 中的 alias 添加你的别名:

{
  "alias": ["alias-1", "alias-2", "alias-3"]
}

支持 VUE 组件

支持使用 vue 组件制作复杂的动画图标、插画等设计资产, 请将组件放置于 src/components 中，同样支持配置 icons-config.json

彩色图标暗黑模式

当我们需要在在暗黑模式下修改彩色图标的颜色可以使用 css 的 filter 属性来实现

.ksw-icon {
  .dark & :deep(svg path) {
    filter: hue-rotate(170deg) invert(100%) contrast(150%) saturate(200%);
  }
}

代码演示

基本用法

从组件顶部的 ksw-vue-icon 导入一个图标，然后在模板标签中使用它，也可以通过设置 spin 属性来实现动画旋转效果。

import {
  IconSearch,
  IconSettingFill,
  IconRefresh,
  IconArrowTop,
  IconLoading
} from "ksw-vue-icon";


<IconSearch />
<IconSettingFill color="#3491FA" />
<IconArrowTop />
<IconRefresh :spin="true" />
<IconArrowTop :rotate="180" />
<IconLoading />

SVG Script

图标库支持 SVG 中的 script 脚本元素，因此可以通过 javascript 来修改 SVG 元素，来为图标设置动画或形状。

下方的示例演示了 SVG Script 标签的作用。在代码中，我们使用 JavaScript 改变 SVG <text> 元素的内容。这样我们就能获得一个始终显示当前日期的日历图标。

点我查看代码

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" onload="init()" aria-hidden="true"
  viewBox="0 0 24 24">
  <script type="text/javascript">
    function init() {
      try {
          var time = new Date();
          var locale = "zh-cn";


var DD = time.getDate();
          var MMM = time.toLocaleString(locale, { month: "short" }).toUpperCase();


document.querySelectorAll("[data-id-feda7348='day']").forEach(function(elem) {
              elem.textContent = DD;
          });
          document.querySelectorAll("[data-id-feda7348='month']").forEach(function(elem) {
              elem.textContent = MMM;
          });
      } catch (error) {
          console.error("An error occurred:", error);
      }
    }
  </script>
  <defs>
    <linearGradient id="42e69816_master_svg1_732_94332" x1=".5" x2=".5" y1="0" y2="1">
      <stop offset="0%" stop-color="#FCFCFB"></stop>
      <stop offset="100%" stop-color="#F0EEE7"></stop>
    </linearGradient>
    <clipPath id="42e69816_master_svg0_732_92815">
      <rect width="24" height="24" rx="0"></rect>
    </clipPath>
  </defs>
  <path fill="#F53F3F" d="M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v3H2Z"></path>
  <path fill="url(#42e69816_master_svg1_732_94332)" d="M2 8h20v10a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4Z"></path>
  <text x="50%" y="6.75" data-id-feda7348="month"
    style="font-size: 4px; font-weight: 600; fill: rgb(255, 255, 255); text-anchor: middle;">7月</text>
  <text x="50%" y="15.5" data-id-feda7348="day"
    style="font-size: 12px; fill: rgb(38, 38, 38); text-anchor: middle; dominant-baseline: middle;">5</text>
</svg>

图标列表

API

参数	说明	类型	默认值
size	图标的大小，宽高相同	number | string	1em
color	图标的颜色，默认为当前颜色	string | string[]	currentColor
rotate	图标旋转角度（IE9 无效）	number	-
spin	给图标加旋转动画	boolean	false