vue引用svg字体字体图标

最新推荐文章于 2024-10-10 07:38:13 发布

风轻云淡180518

最新推荐文章于 2024-10-10 07:38:13 发布

阅读量7.6k

点赞数 1

分类专栏： vue 文章标签： vue iconfont vue-svg-icon

本文链接：https://blog.csdn.net/qq_20343517/article/details/77648016

版权

vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍如何在Vue项目中利用vue-svg-icon插件引入并使用SVG字体图标。首先需要通过npm安装该插件，接着把SVG文件放置在指定路径，并在main.js中引入所需图标。最后，在组件中通过<icon>标签即可使用。

摘要由CSDN通过智能技术生成

本文主要介绍在vue中怎么使用vue-svg-icon插件引用svg字体图标文件，其中svg文件可以在阿里巴巴图标库免费获得。

1. 安装

npm install vue-svg-icon --save-dev

2. 将svg图片放入src/svg

src/svg路径暂时不可配置
src文件夹应和node_modules在同一个文件夹下

3. 在项目的main.js入口引入vue-svg-icon和需要使用的svg文件名（不需扩展名）

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);
//下面可以省略
Icon.inject('chameleon'); // SVG图片名字（无扩展名）

4. 在网页中使用icon标签就可以啦！

<icon name="chameleon" scale="20"></icon>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

风轻云淡180518

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

在vue中使用svg（组件）

凡凡的博客

10-26

694

①.把要使用的svg图片放到一个文件下命名svg放在icons文件夹里边。②.创建index.js。

vue2 vue3 SVG

vdjskshvd的博客

04-18

229

九、vue3+vite项目中配置SVG图标_import { createsvgiconsplugin } from 'vite-plugin--CSDN博客

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

VUE使用svg字体图标

weixin_45685394的博客

09-19

246

vue使用字体图标svg，在src下新建目录icons文件，再在icons文件下新建svg文件，在阿里ico中将字体的svg图片下载下来即可：例如from.svg 在组件中新建icon-svg.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:...

Vue-SVG-Icon 使用教程

最新发布

gitblog_00920的博客

10-10

710

Vue-SVG-Icon 使用教程 vue-svg-icon a solution for multicolor svg icons in vue2.0 (vue2.0的可变彩色svg图标方案) 项目地址: https://git...

在vue中如何使用字体图标(阿里巴巴)

Rziziの博客

10-01

335

在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车。 2.打开购物车，添加至项目。 3.点击生成在线代码 4.点击下载至本地，放入需要文件夹下，可以放入assets下。 5.在style中引用 <style lang="less" scoped> @import '../assets/font/iconfont.css'; @font-face { font-family: 'iconfont'; /* Project id 2845322 */ src: url('

Vue中使用svg-基于vue-svgicon组件

05-17

2413

目录一、下载vue-svgicon 二、main.js中引入三、将.svg转换成.js进行引入四、使用一、下载vue-svgicon cnpm i -S vue-svgicon 二、main.js中引入 import SvgIcon from 'vue-svgicon' Vue.use(SvgIcon, { tagName: 'svg-icon' }); 注意：这里要记得加上{tagName:'svg-icon'}，否则会报错三、将.svg转换成.js进行引..

Vue中使用SVG-ICON

mole的专栏

01-23

8640

在Vue中使用svg-icon，可以按如下配置即可。 1、src/components/SvgIcon目录下创建index.vue，代码如下： <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> expor

vue中引用阿里字体图标的方法

08-28

Vue 中引用阿里字体图标的方法在 Vue 项目中，使用阿里字体图标是一种非常常见的需求，但是很多开发者在引用阿里字体图标时，会遇到各种错误问题。今天，我们将详细介绍 Vue 中引用阿里字体图标的方法，并解决常见...

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

02-04

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

vue-svg.zip

04-25

5. **Web字体服务**：将SVG图标转换为Web字体，然后通过`@font-face`规则在Vue组件中使用。这种方法适用于图标集较大的情况，但不支持动态颜色改变。在"vue-svg.zip"的压缩包中，很可能是提供了一个使用Vue和阿里...

svg-icon图标在vue中使用

m0_69497411的博客

04-09

629

使用示例：二、配置vue.config.js (vue-cli@3.xx +) 三、新建目录相关 1、src/components/SvgIcon/index.vue 2、src/icons 文件夹四、使用 1.在main.js中引入

在Vue中使用icon 字体图标的方法

12-02

1.使用线上的阿里iconfont图标库 1.打开 iconFont官网选择自己喜欢的图标，并且添加购物车 2.点击购物车，添加至项目 3 生成链接 4在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。 2但是考虑网络及用户体验阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹把这些文件放入文件夹 3 iconfont.css文件中改路径 4 在main.js中引入ic

svg-icon：正确的终极SVG图标集，开箱即用有10,000多个SVG图标

02-04

SVG图标终极SVG图标集DONE RIGHT，开箱即用，共有10,000多个SVG图标。下载您可以在根据需要下载任意数量的SVG图标，或通过npm下载整个收藏集： npm install svg-icon --save 自定义元素文件： dist/ ├── svg-icon-element.js └── svg-icon-element.css 用法： <svg-icon url="http://leungwensen.github.io/svg-icon/dist/sprite/symbol/logos.svg" type="si-logos-javascri

vue使用svg

九亿宅男的梦的博客

12-29

1215

一.使用阿里矢量图的svg 1.将阿里矢量图项目下载下来并复制iconfont到项目中 2.创建components/IconSvg.vue文件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> import '.

vue项目中使用svgIcon(svg-sprite-loader安装、配置及使用)

DW14687的博客

05-18

7625

目录前言一、安装svg-sprite-loader 二、封装组件 1.在components路径下新建svg/svgIcon.vue 2.在src目录下新建icons文件夹，包括一下文件三、配置svg-sprite-loader 四、使用svg-icon组件五、配置被选中时的颜色 1.检查svg源文件 2.配置选中后得颜色总结前言网页中经常会遇到一些自定义得小图标，为了保证图标不失真，我们经常使用svgIcon实现。接下来一起看看如何安装和配置把~ ...

vue中使用svg icon

m0_65894854的博客

03-05

1817

svg icon

vue项目使用svg-icon图标

weixin_48942945的博客

02-10

1026

在src目录下创建icons文件夹，在icons文件夹下创建components和svg文件夹，svg文件夹用来存放svg图标代码。在main.js中引入并全局注册svgicon。然后执行npm run svg命令，可以看到components文件夹下已经生成对应js文件。在package.json文件中配置svg图标解析和输出路径。使用格式在main.js中引入生成的index.js。安装vue-svgicon依赖。）选择图标，复制SVG代码。

vue中使用svg图像

PleaseBeStrong的博客

06-01

3619

SVG（可缩放矢量图形）是一种图像格式，它以XML文档的形式存在，用以描述图像中的形状、线条、文本和颜色等元素。大设网（原AI大作）是基于Stable Diffusion的免费ai绘画网站，为ai作画爱好者提供一键生成高清精绘大图、sdxl模型保姆级教程、AI提示词工具。在开发过程中，可以考虑先生成图片（png或者jpg等格式）然后再将其转换为svg，这里推荐个我最近使用的转换网站，对于新用户有免费的转换点可以转换至少10次，当然有更好的网站可以分享到评论区。大设- AI智能绘画平台|设计师创意绘画工具。

svg在vue里面的使用