uiw-iconfont 1.2.4 发布,开源图标字体

uiw-iconfont v1.2.4 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体。

更新内容

新增 environment, eye, folder, man, user-add, user-delete, usergroup-delete, woman, 等8个图标.

网站预览:uiw-react.github.io/icons/
官方文档:github.com/uiw-react/i…

安装

npm install uiw-iconfont --save复制代码

使用

您可以使用 uiw-react.github.io/icons/ 轻松找到您要使用的图标。一旦您复制了所需图标的CSS类名,只需将图标和图标的类名(如apple)添加到HTML元素即可。

你需要链接CSS

<link rel="stylesheet" type="text/css" href="node_modules/fonts/w-iconfont.css">复制代码

用于Less:

@import "~uiw-iconfont/fonts/w-iconfont.css";复制代码

注意:它有一个w-icon-前缀。

<i class="w-icon-apple"></i>复制代码

或者使用Unicode,您可以使用Unicode网站轻松找到您要使用的Unicode图标。

<style>
.iconfont{
  font-family: "w-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
<span class="iconfont">&#59907;</span>复制代码

开发

在克隆项目之后运行 npm install 来安装依赖,你能够做如下操作:

编译字体 *.svg *.ttf *.woff *.eot 等字体文件

npm run font复制代码

编译网站并提交到gh-pages分支

npm run start复制代码
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue CodeMirror 6是一个基于Vue.js和CodeMirror的组件库,用于实现代码编辑器。它支持多种语言和主题,并提供了许多自定义选项。 下面是一个使用Vue CodeMirror 6实现代码编辑器的示例: 1. 安装vue-codemirror6 ```bash npm install vue-codemirror6 ``` 2. 在Vue组件中使用CodeMirror ```vue <template> <div> <codemirror v-model="code" :options="cmOptions" /> </div> </template> <script> import { defineComponent } from 'vue' import CodeMirror from '@uiw/react-codemirror' import 'codemirror/keymap/sublime' import 'codemirror/theme/dracula.css' import 'codemirror/mode/javascript/javascript' export default defineComponent({ name: 'CodeEditor', components: { CodeMirror }, data() { return { code: '', cmOptions: { theme: 'dracula', keyMap: 'sublime', mode: 'javascript', lineNumbers: true } } } }) </script> ``` 在这个示例中,我们首先导入并注册了`CodeMirror`组件,并定义了一个`code`变量来存储用户输入的代码。然后,我们使用`cmOptions`对象来配置CodeMirror实例的选项,包括主题、按键映射、语言模式和行号。 最后,我们将`code`变量和`cmOptions`对象分别绑定到`v-model`和`options`属性上,这样就可以实现一个完整的代码编辑器。 需要注意的是,在这个示例中我们只使用了JavaScript语言模式,如果需要支持其他语言,需要根据需要引入对应的模式文件,如`codemirror/mode/htmlmixed/htmlmixed`等。 总之,使用Vue CodeMirror 6可以方便快捷地创建一个功能强大的代码编辑器,并支持多种语言和主题的自定义。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值