wk-view

Appearance

On this page

wkv-icons ​

用于展示 icon 图标 。

用法 ​

html
<wkv-icons name="close"></wkv-icons>

图标库 ​

点击即可复制图标名称close-circle复制成功search复制成功eye-off复制成功eye复制成功up复制成功left复制成功down复制成功right复制成功plus复制成功minus复制成功select复制成功trash复制成功scan复制成功location复制成功location-filled复制成功close复制成功loading复制成功

自定义图标 ​

注意！！！

nvue 页面暂时不支持自定义图标，如需在 nvue 中使用 ，请自行引入字体文件

wkv-icons 已经收录了日常开发中常用的图标 ，但是因为体积问题 ，不可能一直无限添加新图标 ，所以 wkv-icons 也提供了扩展的方法。

使用 icon-lib 和 name 属性自定义图标：

vue
<wkv-icons icon-lib="icon-lib" name="icon-cart" size="30"></wkv-icons>

获取图标 ​

以下所有说明都是基于 iconfont 图标库 进行扩展，其他图标库同理，明白原理即可方便扩展。

  1. 访问 iconfont 图标库，搜索图标并加入购物车。 搜索图标并加入购物车
  2. 点击页面右上角购物车按钮，点击添加至项目，如果没有项目可点击加号按钮新建一个。 购物车图标添加至项目
  3. 确定后进入项目，点击项目设置，对图标库进行一些设置。 进入项目设置
  4. 项目名称和项目描述根据自己需求填写，FontClass 是图标的前缀 ，需要和图标名一起传入组件 name 属性，Font Family 是图标集名称，需要传入组件 icon-lib 属性，字体格式可以只勾选 ttf。 项目设置
  5. 点击保存后，可以下载图标库到本地。 下载图标库到本地
  6. 下载解压后，需要用到的文件暂时有两个 iconfont.css、iconfont.ttf。 本地图标库
  7. 将 iconfont.ttf、iconfont.css 放到项目根目录 static 下。
  8. 打开 iconfont.css,修改 @font-face 如下,注意 src 字体文件的引用路径是否正确。
css
@font-face {
	font-family: "icon-lib"; 
	src: url('/static/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family: "icon-lib" !important;
  font-size: 16px;
}

.icon-search:before {
  content: "\e65c";
}

通过上述操作 ，现在就获得一个可以自定义的图标库。

在 vue 页面使用自定义图标 ​

在项目根目录的 App.vue 中，引入上述的 iconfont.css，注意自己存放的路径，且通过 @import 引入的外部样式，需要写在 style 标签有效内容中的最前面

vue
<!-- App.vue -->
<style>
@import "@/static/iconfont.css";
</style>

使用 icon-lib 和 name 属性自定义图标

vue
<wkv-icons icon-lib="icon-lib" name="icon-search" size="30"></wkv-icons>

Props ​

属性名类型默认值说明
nameString-图标名称
colorString#333333图标颜色
size[Number, String]16图标大小，单位 px
iconLibString-自定义图标集的名称

Events ​

事件名事件说明函数签名参数说明
click点击 icon 触发事件() => void-

示例 ​

vue
<template>
	<view class="wkv-icons-example">
		<wk-section>默认：</wk-section>
		<wkv-icons name="loading"></wkv-icons>
		<wkv-icons name="close"></wkv-icons>
		<wkv-icons name="up"></wkv-icons>
		<wkv-icons name="down"></wkv-icons>
		<wkv-icons name="left"></wkv-icons>
		<wkv-icons name="right"></wkv-icons>

		<wk-section>颜色：</wk-section>
		<wkv-icons name="loading" color="red"></wkv-icons>
		<wkv-icons name="close" color="green"></wkv-icons>
		<wkv-icons name="up" color="blue"></wkv-icons>
		<wkv-icons name="down" color="pink"></wkv-icons>
		<wkv-icons name="left" color="goldenrod"></wkv-icons>
		<wkv-icons name="right" color="blueviolet"></wkv-icons>

		<wk-section>尺寸：</wk-section>
		<wkv-icons name="loading" size="14"></wkv-icons>
		<wkv-icons name="loading" size="16"></wkv-icons>
		<wkv-icons name="loading" size="18"></wkv-icons>
		<wkv-icons name="loading" size="20"></wkv-icons>
		<wkv-icons name="loading" size="22"></wkv-icons>
		<wkv-icons name="loading" size="24"></wkv-icons>
	</view>
</template>
vue
<script setup lang="ts"></script>
scss
<style lang="scss">
.wkv-icons-example {
	padding: 20px;
}
</style>