iconfont的组件化使用方法（SVG）

吉屋安

已于 2024-02-26 22:30:12 修改

阅读量2k

点赞数 27

分类专栏：前后端分离项目笔记文章标签： javascript 前端 vue.js

于 2024-02-26 21:51:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52774158/article/details/136309456

版权

本文介绍了如何在Vue3项目中通过组件化方式引入Iconfont的SVG图标，并能控制图标的颜色、大小和类名。操作步骤包括在Iconfont选择图标、创建iconfont.js文件和svgIcon组件，利用Vue3的计算属性实现动态绑定和样式管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求描述

将iconfont图标库选择的图标以SVG的形式引入项目
并通过组件化的形式在项目中引用
可控制图标的大小和颜色

二、操作步骤

1.在iconfont中选择项目需要使用的图标

在这里插入图片描述
复制图片中的代码（全部复制）

2.在项目中创建iconfont.js

在项目中创建iconfont.js，并将复制的代码粘贴
在这里插入图片描述

3.创建svgIcon组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconClassName" :fill="color" />
  </svg>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

吉屋安

关注关注

27
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

iconfont的SVG图标如何使用配置

DreamStat的博客

01-11

377

此时配置的工作就已经完成了，将上面复制的svg代码，在src/assets/icons 下创建一个phone.svg。一般情况下如果用，建议封装成组件使用，下面是组件代码，复制过去直接使用即可，将下面代码放到index.vue中即可。下面组件使用了驼峰，因为上次创建的就是phone.svg, 所以这个name里面传的就是phone。1. 首先登陆iconfont的官网，找到需要图标，复制图标的svg。将标记的给负责到项目中去即可。在main.js里面导入这个。

Iconfont该如何使用，多种组件模块化详解（png，icon，svg）

炑焽的博客

04-18

2589

Iconfont是一个功能强大、资源丰富的在线图标库，通过掌握其使用方法和多种组件的模块化应用技巧，我们可以更好地利用图标进行设计和管理，提升作品的质量和用户体验。接下来，本文将详细介绍Iconfont的使用方法以及各种图标格式的模块化应用技巧。

参与评论您还未登录，请先登录后发表或查看评论

iconfont使用svg

qq_45838276的博客

07-25

1226

3）在src下创建icons文件夹以及在其下创建svg文件夹（存放iconfont的svg代码）和index。（4）在components下创SsvgIcon.vue组件（封装，并且上一步把它挂载到原型上）（6）使用svg（template就是你在icons下svg的文件名）（2）在vue.config.js配置规则。（5）在main.js下引入icons。index.js内容。...

Vue项目中通过svg代码引入iconfont图标

最新发布

samroom的博客

04-13

439

在vue项目中通过svg代码引入图标

iconfont+svg矢量图使用与介绍

wch0001的博客

01-20

3067

目录准备工作三种基本的使用方法Unicode引入font-class引入Symbol引入彩色模式总结准备工作首先进入阿里巴巴的iconfont的官网，如果没有账号的话就先注册账号找到中意的svg图标或者上传自己的svg图标，然后加入购物车新建一个项目，从购物车里将图标加入到项目中 4.生成并下载代码，然后解压后放到自己项目的静态文件目录三种基本的使用方法 Unicode引入 Unicode 是字体在网页端最原始的应用方式，特点是：支持按字体的方式去动态调整图标大小，颜色等等。默认情况

使用：iconfont的svg图标（2种方法）

qq_38969618的博客

06-22

5848

进入iconfont官网，选中图片-》“复制SVG代码”-》在项目的icons/svg文件夹中新增xxx.svg文件，将之前复制的svg代码直接粘贴-》运行"npm run svg"命令，系统自动生成对应的xxx.ts声明文件-》在页面中通过svgicon组件（name = "xxx"）使用即可。 // main.ts import SvgIcon from 'vue-svgicon' Vue.use(SvgIcon, { tagName: 'svg-icon', defaultWidth: '

寒假学习记录6：svg图标、iconfont字体图标的使用

前端萌新

01-31

3069

我们只需要这四个文件，然后将这4个文件复制到自己的项目里就行。8.使用iconfont图标，点开html，写入i标签，别的签也写。7.输入默认css样式，直接复制拿去用就行，不用改。7.点开iconfont.css文件，里面长这样。9.使用，套个i标签好一点，不套也没事。1.首先进入阿里巴巴矢量图标库。3.点击购物车，点击添加至项目。2.选择要下载的图标，选择下载。3.点击购物车，点击下载代码。1.进入阿里巴巴矢量图标库。1.进入阿里巴巴矢量图标库。iconfont-阿里巴巴矢量图标库。

flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩

05-06

3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入flutter插件 flutter_svg { ... dependencies: # 版本号请以官方库的为准：https://pub.dev/packages/flutter_svg flutter_svg: ^0.19.3 ... } 然后...

vue中手动封装iconfont组件（三种引用方式的封装和使用）

艾欢欢的博客

05-07

2725

在线使用有时候会因网络问题影响用户体验；直接放在本地使用，如果过多使用也会显得繁琐，所以就可以将其封装成一个组件，也方便维护。封装基于阿里巴巴图标库的项目图标。初次使用iconfont项目参考：点我查看使用前的准备和三种引用方式介绍准备将项目内的图标下载至本地在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件解...

vue-svg-icons：中型文章“一个微小的Vue SVG图标组件-图标字体的替代品”的配套存储库

02-04

vue-svg-icons 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置请参阅。

使用svg引用iconfont

weixin_44298215的博客

07-31

802

iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。4. 将上面的iconfont的js文件放在assets目录下。3. 选择Symbol，生成的js文件下载下来。iconfont-阿里巴巴矢量图标库。6. 封装SvgIcon组件。8. 使用SvgIcon组件。5. 在main.ts中引入。2. 在项目中生成在线代码。7. 将组件注册为全局组件。

fancyicon:一个svg转iconfont文件的工具

05-19

FancyIcon power by fancylin 一个跨平台的iconfont自动生成工具下载链接使用步骤拖入svg图标，或原本已生成好的iconfont.config.json 可修改图标名称，该名称为生成iconfont class 名称，如名称为 car，那么对应该iconfont的css class为 .iconfont-car 点击下一步，选择生成字体存放目录可更改生成iconfont的字体包名称，iconfont对应css class 的前缀，如 iconfont可改为icon 点击确认，即可生成iconfont字体图标，对应的css，和一个示例页面使用视频开始开发 # clone from git git clone https://github.com/linfancy/fancyicon.git # install dependencies cd fan

使用 iconfont 中的 svg 图标

未思

05-19

1万+

最近在使用 Element-UI开发的时候发现其图标并不是够用，于是想着如何将 https://www.iconfont.cn/home/index 上面的图标导入进自己的项目中去。网上的搜索结果基本都是传统的引入CSS的方法，并没有使用到SVG的特性，这里介绍使用SVG来引入图标，这中方式普适任意的组件库。首先我们在iconfont上新键好自己的项目并下载至本地，打开之后其文件如下我们只...

怎么使用 Iconfont 的 svg 矢量图标

zhongmei121的专栏

07-17

5040

场景：ui设计师把设计图标上传到Iconfont，前端从Iconfont下载所有图标，然后在代码中使用第一步：把项目的svg下载到本地解压打开是这样的：第二步：把下载的文件放进项目assets路径下第三步：在main.js中引入iconfont文件第四步：在业务页面使用，其中xlink:href就是对应的svg的id svg的id可以在Iconfont...

Iconfont 开源库 Iconic 使用方便你使用svg图片。随意更改你的色调。

ff623893的博客

11-18

3138

对于SVG，安卓可以试用vector可以引入到drawable里，就可以直接相当于图片使用，但是这样做会造成颜色控制困难，导致效率并不高。所以可以直接将值封装成字体包的形式，直接设置textColor就好了。想变红就不会变绿。Iconfont目的在使用SVG的时候引入字体包，如果再项目中引用纯色图片，使用SVG会达到一个高效的目的，长话短说，直接开始说，怎么用。这里，讲解的是阿里巴巴矢量库里的ico

iconfont里面svg的全局配置

W18223596054的博客

03-28

423

/ 1. 图标的名字（icon） 2. 图标的颜色（color）3.图标的大小（size）3. customStyle（用户配置的sty）// 如果style与customStyle有属性的冲突，谁在后面以谁为主。// 12的数字（给他加一个px） 12px （不管）// 对于应用类型，必须要写成函数返回的方式。// 填充（颜色），去自己的颜色进行填充，取父级。// 用户自定义的行内样式。// 如果用户传了size。// 如果用户传了颜色。// 定义一个props。

Android应用开发之PNG、IconFont、SVG图标资源优化详解