vue引入外部icon图标

最新推荐文章于 2024-07-29 13:59:59 发布
最新推荐文章于 2024-07-29 13:59:59 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgh15779256749/article/details/107106816
版权
  1. 在标签里面加上suffix-icon属性
    在这里插入图片描述
    2.下载第三方icon图标，ex阿里图标，并放到assts里面
    在这里插入图片描述
    3.在main。js中导入
    在这里插入图片描述
    4.阿里图标库方法，载入已经在main导入了
    在这里插入图片描述
    在这里插入图片描述
    5.将在属性里面添加 iconfont 图标名
    在这里插入图片描述
菜鸡，贴子写得很菜
关注
专栏目录
【vue3】：Icon 图标处理方案
做技术，坚持才是最重要的，一时的热情只是暂时的进步
06-25 964
图标无非是两种图标，及因此：我们需要封装一个可以兼容和的组件基本代码 引入 中的文件，并全局注册组件在 src 目录下创建 icons文件夹，并在其目录下创建svg文件夹用于存放图标，及注册文件 将 引入到 在加载的图标中，需要使用及修改webpack才能加载出图标loader：svg-sprite-loader@6.0.9 基本使用...
vue中通过svg方法导入icon图标
m0_57932116的博客
03-14 1993
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
vue3项目导入本地图标
qq_19688207的博客
07-29 502
1.将存有图标的svg文件夹拷贝到vue项目src/assets/icons目录下。3.下载的压缩包解压到本地，并将解压的图标文件拖拽进新创建的svg文件夹中。2.在 src /components文件夹目录下，创建一个svg组件。3.在main.js或者main.ts中配置全局。main.js或者main.ts引入注册脚本。注意：icons目录需要自己创建。2.自己的图标库下载入库的图标。1.安装svg图标引用所需插件。
VUE element-ui之使用外部图标---iconfont篇
HanXiaoXi_yeal的博客
10-28 2493
步骤： 1、进入iconfont官网传送门并使用任意方式登录。 2、按如下步骤进行： 3.图标库建好后直接搜索自己需要的图标按如下步骤： 4、将文件解压后，在项目assets下新建文件，将解压文件放入 5、在main.js中引入： import './assets/icon/iconfont.css' 6、在标签中使用类名引入图标： <el-button style="margin-left: 4px" class="filter-item iconfont icon-zhuan
vue3项目引入第三方图标（阿里图标）
kanno的博客
03-01 1449
vue3项目引入第三方图标（阿里图标）
vue 外部字体图标使用，无须绝对路径引入办法
weixin_33904756的博客
10-10 334
通常外部字体图标都在使用 iconfont ，这种图标在网上搜到一大把都是由于路径问题显示不出来，或者是显示个方块。 最近的项目中也碰到这个坑爸的问题，总结一下解决办法： 和 webpack.config 配置没有多大关系，按照 vue-cli 生成的  webpack.base.conf.js 这个文件不需要改动，保持原来就好 将 icon 文件与 icon 样式文件 置于同一目录下放在 a...
vue导入图标的3种方式【阿里图标】
weixin_41027083的博客
03-22 1万+
第一种方式 Font class- css 点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。 @font-face { font-family: "iconfont"; /* Project id 3262995 */ src: url('iconfont.woff2?t=1647910536684') format('woff2'), url('iconfont.woff?t=1
Vue中引入svg图标的方式
十里不故梦
01-12 3915
Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> &l
Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
weixin_44209082的博客
04-17 1094
1. 在src文件下，创建components/SvgIcon/index.vue组件 <template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className" /> <svg v-else class="svg-icon" :class="className" aria-hidd
Vue3中使用Ant Design Vue图标
海阔天空
03-28 2704
Vue3中使用Ant Design Vue图标
vue element项目引入icon图标的方法
08-27
主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
mpvue小程序中怎么引入iconfont字体图标？
光
07-04 7170
前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站，可以下载/在线编辑/上传自己需要的矢量图标，也支持团队协作，那么在mpvue项目中如何引入呢？ iconfont阿里巴巴矢量图标库 将图标加入购物车 搜索关键词可以是中文也可以是英文 下载素材 点击网站右上角的购物车图标，此处我们选第三个 ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请...
Vue项目引入icon图标(阿里巴巴矢量图标库)
weixin_59528719的博客
02-28 1338
当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。
Vue项目中如何优雅的使用icon
weixin_43589827的博客
04-13 569
在开始了解如何在 Vue 项目中规范的使用 icon 前，我们需要先了解一些 icon 最基础的知识点- sprite 技术。 Sprite 技术 目前，SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢？单纯翻译的话，是“符号”的意思。然而这个释义并不符合这里的场景。不知大家有没有用过Flash，symbol实际上就类似于Flash中的“影片剪辑”、或者“元件”。因此，我个人觉得，symbol应该解释为“元件”最为恰当！那，symbol和SVG Sprite又有什么关系呢？我们可
vue3 iconify 图标几种使用 并加载本地 svg 图标
weixin_43512977的博客
11-22 3441
vue3 iconify 图标几种使用 并加载本地 svg 图标
大数据毕业设计之前端05：Vue中如何加载本地svg图标
CatchLight的博客
03-04 1394
上篇文章主要讲了图标组件Icon的实现，主要包括了两种常用的图标。今天就讲一下如何在Icon中加载本地的svg图标。开篇还是将Icon实现结构图放出来，今天只看svg这条支线。在components/icon/svg目录下，实现了一个svg的component，定义html原生的svg标签。下的中的href属性，需要指定的是svg图标的名字，而绑定的iconName，可以看到是引用的是props.name，即是通过父组件传过来的name属性。
Vue 引入 icon 图标
热门推荐
小贤笔记
07-27 1万+
安装 npm install vue-svg-icon --save-dev 使用 1. 阿里巴巴矢量图 选择需要的字体修改参数 选择SVG下载 2. IcoMoon 点击右上角”icoMoon App” 点击左上角”Import Icons” 选择下载的 svg 文件,点击”打开”按钮 页面上会多一个”Untitled Set”选项,下面的小图标就是导入的本地 sv...
vue项目中插入icon图标
qq_50988305的博客
12-28 3941
在写vue+element-ui项目时，element-ui中的图标不合我们的意时，我们可以上iconfont扒拉扒拉
vue如何直接使用svg图标
最新发布
09-12
在Vue中直接使用SVG图标通常有两种常见的做法： 1. **内联SVG**: - 将SVG作为字符串包含在模板的`<template>`标签内，例如: ```html <div> <svg :width="24" :height="24"> <use xlink:href="#icon-name"></use> </svg> </div> ``` 这里假设`#icon-name`是你SVG文件中的ID。你可以通过CSS选择器动态设置宽度、高度等属性。 2. **引入外部SVG文件**: - 首先将SVG保存为独立文件（如`icon.svg`），然后在项目中引用： ```html <template> <img :src="require('./assets/icon.svg')" alt="Icon"> </template> ``` 使用`require`函数加载SVG，并通过`v-bind`绑定到元素的`src`属性。 3. **利用Webpack处理**: 如果你使用的是Webpack，可以使用`file-loader`和`url-loader`来转换SVG为Data URL，避免跨域问题： ```javascript { test: /\.svg$/, use: [ 'file-loader', { loader: 'svg-url-loader', options: { limit: 10000, // 限制大小，超过则转为Data URL name: '[name].[ext]', // 输出文件名 }, }, ], } ``` 使用上述任一方法时，你还可以考虑使用专门的库，如`vue-svg-icon`或`vue-svg-loader`，它们提供了更方便的方式来管理SVG图标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值