vue3 组件篇 Icon

文章目录

组件介绍

Icon(图标)组件是一种常见的用户界面元素,用于在网页、移动应用和桌面应用中显示图标。这些图标通常用来传达信息、进行导航、增强用户界面或提供视觉元素。

如何在项目中搭建iconfont字体图标库

很久以前介绍过一种阿里字体图标库的使用 https://blog.csdn.net/glorydx/article/details/108262413

今天介绍另外一个工具icomoon,来自由地创建字体图标库,你可以添加,删除,或者在现有的库里寻找你想要的字体图标。

快速创建一套iconfont

进入 icomoon(官网:https://icomoon.io/),在网页右上角找到 IcnMoon App 按钮,点击进入。

点击 icon libray,进入官网提供的一些现成的组件库,还是很齐全和多样的

随便选一个点击Add,当然我已经选好了一个

返回之前的页面,点击select all 全选

点击底部的generate font 生成iconfont的一些相关文件

进入新页面后,点击download下载这些iconfont的文件压缩包

解压后,将里面有用的文件提出来

可以将fonts文件夹和style.css直接放入项目的跟目录中,这样再引入style.css,项目就可以直接使用这些iconfont了。

如果想要使用scss文件,需要将style.css适当改造,以下代码,只展示两个文件改造的部分,其实就是改了一下引入的方式。

style.css

css 复制代码
@font-face {
  font-family: 'icomoon';
  src:  url('icomoon.eot?yt36bb');
  src:  url('icomoon.eot?yt36bb#iefix') format('embedded-opentype'),
    url('icomoon.ttf?yt36bb') format('truetype'),
    url('icomoon.woff?yt36bb') format('woff'),
    url('icomoon.svg?yt36bb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

style.scss

javascript 复制代码
@font-face {
  font-family: 'icomoon';
  src:  url('~@/fonts/icomoon.eot?yt36bb');
  src:  url('~@/fonts/icomoon.eot?yt36bb#iefix') format('embedded-opentype'),
    url('~@/fonts/icomoon.ttf?yt36bb') format('truetype'),
    url('~@/fonts/icomoon.woff?yt36bb') format('woff'),
    url('~@/fonts/icomoon.svg?yt36bb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

这样在项目中引入style.scss也能正常使用iconfont了(前提是项目依赖支持使用scss)

修改 或 新增iconfont

进入icomoon的网站 https://icomoon.io/app/#/select,点击import icons

将之前保存下来的selection.json文件导入其中,这样就得到了目前项目中已经有的iconfont

再点击import icons,导入新icon的svg文件,然后选中它

剩下的就是重复之前的一些步骤 generate font,然后download,将需要的文件保存下来,替换掉原来的文件即可。

组件安装与使用

需要先安装vue3-dxui

javascript 复制代码
yarn add vue3-dxui

或者

javascript 复制代码
npm install vue3-dxui

全局main.ts中引入css

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入

javascript 复制代码
<script>
import { Icon } from 'vue3-dxui'

export default {
  components: {
  	Icon
  }
}
</script>

组件代码

javascript 复制代码
<template>
  <span class="dx-icon icomoon" :class="className" :style="style"></span>
</template>

<script lang="ts">
import { ref, SetupContext, PropType, CSSProperties } from 'vue'

import { Data } from './types/index'

export default {
  name: 'Icon',
  props: {
    // 通过传递类名,来自定义样式
    iconName: {
      require: false,
      default: 'anquan',
      type: String
    },
    // 自定义样式
    style: Object as PropType<CSSProperties>
  },
  setup(props: Data, context: SetupContext) {
    // const currentInstance: ComponentInternalInstance | null = getCurrentInstance()
    const className = ref(`icon-${props.iconName}`)

    return {
      className
    }
  }
}
</script>

<style lang="scss">
@import '@/scss/layout.scss';
@import '@/fonts/icomoon.scss';
</style>

参数说明

名称 说明
iconName 预备了一些icon,可以通过传入字符串进行自由选择
style 自定义一些样式,一般是控制icon的大小和颜色

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库,倾向于pc网站的交互模式。

  1. 如果你有任何问题,请在博客下方评论留言,我尽可能24小时内回复。
  2. dxui新上线的官网域名变更 http://dxui.cn
  3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
  4. 如果你想看完整源码 https://github.com/757363985/dxui
相关推荐
汪叽家的兔子羡1 天前
vue模块化导入
前端·javascript·vue.js·typescript·vue3·vue2·vite
朝阳393 天前
vue3【组件封装】超级表单 S-form.vue
vue3·组件封装
清岚_lxn8 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf
伍哥的传说13 天前
Vue3 Anime.js超级炫酷的网页动画库详解
开发语言·前端·javascript·vue.js·vue·ecmascript·vue3
科技D人生13 天前
Vue.js 学习总结(18)—— Vue 3.6.0-alpha1:性能“核弹“来袭,你的应用准备好“起飞“了吗?!
前端·vue.js·vue3·vue 3.6·vue3.6
伍哥的传说14 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook15 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程15 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
一只小阿乐16 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
知识分享小能手16 天前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue