nuxt 引入iconfont多色图标

symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
兼容性较差，支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

目录结构：

第一步：引入iconfont.js：

nuxt.config.js文件中：

plugins: [{ src: "./static/font/iconfont.js", ssr: false }]

第二步：加入通用css代码（引入一次就行）：

common.js文件中：

.icon {width: 30px; height: 30px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}

nuxt.config.js文件中引入：

css: ["./static/common.css","./static/font/iconfont.css"],

第三步：挑选相应图标并获取类名，应用于页面：

<template><section class="container"><div><!-- 无颜色 --><i class="iconfont icon--message" style="font-size:30px"></i><i class="iconfont" style="font-size:30px"></i><!-- 有颜色 --><svg class="icon" aria-hidden="true"><use xlink:href="#icon--message"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon--strategy"></use></svg></div></section>
</template>

页面：

nuxt 引入iconfont多色图标相关推荐

小程序引入iconfont多色图标
1.登录阿里图标库网址 2.将下载的文件进行解压,命名为iconfont 3.全局安装npm install -g iconfont-tools 4.运行命令行: iconfont-tools,如下图 ...
Iconfont多色图标使用和单色图标实现渐变色
iconfont多色图标使用引入iconfont提供的Symbol的js文件 <script src="//at.alicdn.com/t/font_2300423_06dtj5dw ...
9012年了你还在用单色图标？(iconfont多色图标详解)
前言记录iconfont的三种使用方式多色图标出来已经很久了,现在才拿出来说貌似有点过时... 但为了方便自己以后知道怎么使用,也为了让更多刚入门的新手熟悉iconfont,还是决定写一篇比较详细 ...
flutter项目引入iconfont【阿里巴巴图标】的图标
下载图标这里直接去iconfont阿里巴巴矢量图标库,选好自己需要的图标,点击如下图所示[添加到库] 然后选择头像左侧的购物车图标然后点击下载代码引入图标解压完打开文件夹可以看到如下文件列表, ...
html如何引入iconfont官网图标
1.首先打开iconfont官网选择你想要的图标 http://www.iconfont.cn 2.将图标添加入库,加入你的一个项目中(小米商城是我自己新建的一个项目) 3.打开该项目,生成链接,打开 ...
uniapp中使用iconfont多色图标
1.iconfont下载图标 2.安装iconfont-tools npm install -g iconfont-tools 3.powershell执行命令 1. 以管理员身份运行PowerShe ...
vue引入iconfont阿里字体图标库报错和解决
报错:引入阿里字体库后报错说找不到文件解决:在引入的字体iconfont.css中加入绝对路径内容:如图 @font-face {font-family: "iconfont" ...
Iconfont 多色图标使用svg颜色无法修改问题
原因是因为iconfont.js里面的fill 被写死了,所以修改不了. 1.把icon文件下载下来,打开iconfont.js,使用编译器正则替换掉所有包含fill="xxx", ...
微信小程序使用iconfont阿里矢量多色图标
引用使用方法: 引用方法名支持多色兼容性 unicode ❌ 好 font-class ❌ 良好 symbol ✔ 差虽然unicode和font-class很好,但你会发现都不支持多色模式, ...
如何引入iconfont中的单色图标和多色图标（超简单）
网址:iconfont-阿里巴巴矢量图标库超简单!再不会引入就过分了哈! 一.单色图标引入 1.选择需要的图标 2.创建新项目.添加至该项目.下载到本地 3.将压缩包解压到自己的代码文件夹中 4.在 ...

nuxt 引入iconfont多色图标

symbol引用

第一步：引入iconfont.js：

第二步：加入通用css代码（引入一次就行）：

第三步：挑选相应图标并获取类名，应用于页面：

nuxt 引入iconfont多色图标相关推荐

最新文章

热门文章