svg-icon

Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons

Vue3+vite搭建基础架构（9）---使用vite-plugin-svg-icons说明安装vite-plugin-svg-icons使用vite-plugin-svg-icons添加svg-icon
谁不想飞舞青春·2024-02-20 19:26

vue 使用svg图标

1、创建svg-icon组件exportdefault{name:'SvgIcon',props:{iconClass:{type:String,required:true},className:{type
Amy_yqh·2024-02-03 13:01

vue（vue2）使用svg格式图标

文件夹放svg后缀文件index.js文件中的配置importVuefrom"vue"importsvgIconfrom"@/common/iconSvg/index.vue"Vue.component('svg-icon
三七_z·2024-01-27 01:43

SVG ICONS：在线生成SVG图标，可自定义渐变颜色

项目名称：SVGICONS项目地址：iconshock.com/svg-icon
平面视觉·2024-01-14 12:32

原生微信小程序如何动态修改svg图片颜色及尺寸、宽高（封装svgIcon组件）

最终效果前言动态设置Svg图片颜色就是修改Svg源码的path中的fill属性，通过wx.getFileSystemManager().readFile读取.xlsx文件把文件转成base64封装svg-icon
wocwin·2024-01-06 06:50

svg-icon图片不能改颜色

svg-icon图片不能改颜色svg-icon为啥变不了颜色？因为去字体图标库下载的时候选了颜色，那svg文件里就自带了fill属性，所以我们在外面用color改不了svg的颜色。
夕阳栖天角·2023-11-27 06:24

Vue中使用SVG封装成SVG组件

一、在vue脚手架生成的文件夹下的src/components创建一个Svgexportdefault{name:'svg-icon',props:{iconClass:{type:String,required
O槑頭槑腦·2023-11-25 09:15

1分钟教你在Vue脚手架中使用SVG矢量图

svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件在main.js中引入它额外需要svg-sprite-loader的配合，及对应的vue.config.js
AndyandYQAQ·2023-11-24 19:16

自定义svg-icon组件实现

false,/\.svg$/)svgRequired.keys().forEach((item)=>svgRequired(item))exportdefault(app)=>{app.component('svg-icon
c++开发工程师·2023-10-23 09:47

svg-icon网站

svgporn:语言、系统、公司等logo,免费，高质量只能一个一个下载，flaticon:很多图标，用google登录后，可以打包下载,需注册，免费256个，高质量simpleicon:800+，一些常用的网络iconcssauthor:免费，icon包收集，只能打包下载openclipart:免费，众多，可搜索，质量良莠不齐，需要细心查找vectorizer：目前测试效果最好将png转为svg
FireFly2Die·2023-10-20 18:46

vue3+vite+ts 使用svg

componemts里新建svgIcon文件夹，新建SvgIcon.vue，封装成组件constprops=defineProps({name:{type:String,required:true}}).svg-icon
@呵呵·2023-10-16 10:11

vue3+vite项目中使用svg图标

vue3+vite项目中使用svg图标引言1.vite-plugin-svg-icons插件安装配置2.下载svg图标3.使用svg图标封装svg-icon组件全局注册组件中使用引言项目中有很多地方需要用到
南木元元·2023-10-16 10:11

在vue3+vite+Ts项目中使用svg

这里写自定义目录标题1、首先在conponents目录下创建组件2、在main.ts文件中在main.js里面全局注入svg-icon组件3、在utils目录下创建svg.ts文件4、在vite.config.js
#GZ·2023-10-16 10:35

Vue3+vite 中使用 svg-icon

Start在Vue3+vite项目中想要通过全局引入的方式，使用svg-icon时，发现不兼容Vue2的使用方法，故有了以下的探索：Solve一、使用svg-icon，并以全局引入，可以参考vue-element-admin
许小波啊·2023-10-03 19:30

【Vue3】在Vue项目中如何使用svg-icon组件（Webpack）

Vite实现安装插件npminstallsvg-sprite-loader-D//或者yarnaddsvg-sprite-loaderpackage.jsonps:^的意思是大版本，就是6不变。～的意思是小版本，也就是第二位0，不变。此处指的是在node升级等方面的问题下载图标（svg格式）目录：src/assets/icons/svg/scan.svg用到的是腾讯codesign，其他平台也能进
毛毛三由·2023-10-03 19:59

vue引入svg图标

里面代码importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'//svg组件//registergloballyVue.component('svg-icon
偏爱墨绿色·2023-09-17 14:50

vue中使用本地svg，抽为全局组件svg-icon

vue中使用本地svg，抽为全局组件svg-iconvue中使用本地svg，抽为全局组件svg-icon增加icon文件夹SvgIcon组件main.js中导入icons修改配置vue中使用本地svg，
Vincent.TM·2023-08-30 10:17

svg-icon图片修改颜色的三种方法

1.直接修改svg文件中fill属性2.直接添加css.svg{fill:currentColor;color:gray;}//添加类名这种方法会使一部分图片无法修改颜色。原因是svg图片源的path标签内有默认的fill属性（如下）或者是3.修改svg图片源1：选中svg图片，使用记事本或者编辑器打开2：找到里面 所有 的 path标签 里的 fill属性 并且删除，然后再以第一种方法设置颜色即
Best_Liu~·2023-08-16 09:37

VUE 中使用SVG

1.安装svg-sprite-loadersvgonpmisvg-sprite-loadersvgo2.创建SvgIcon组件exportdefault{name:'svg-icon',props:{iconClass
逐梦的蜗牛·2023-08-13 08:18

安装vite-plugin-svg-icons

安装vite-plugin-svg-icons使用svg-icon，即可使用iconfont等svg图标库安装及使用过程一、安装依赖二、在src/assets新建svg目录三、vite.config.js
前端小王hs·2023-07-30 05:07

如何在VUE项目中使用svg图标

文章目录前言一、SVG相较于字体图标的优点二、使用步骤1.新建一个vue2项目2.安装项目依赖3.在src目录下新建文件夹4.创建svg-icon组件5.在main.js中引入icons下的index.js6
前端百草阁·2023-07-15 17:32

在vue中使用icon-font

1.新建components/SvgIcon.vue组件使用的是阿里巴巴的iconfont图标库，有三种方式可以引用，我使用的是symbol方式exportdefault{name:'svg-icon'
风间澈618·2023-04-17 20:52

vue 使用require.context显示文件夹下所有的svg-icon图标

前言近日因开发的项目变得越来越大，导致项目使用的svg-icon越来越多，所以想要制作一个页面来显示目前引入的所有svg-icon，方便查找与使用。
_大风起兮·2023-04-14 10:35

vue3.0 引入svg-icon组件

1。在vue项目中的components添加目录SvgIcon:2.在目录下添加Index.vue，如上图;Index.vue的内容为：import{isExternal}from'@/utils/validate'exportdefault{name:'SvgIcon',props:{iconClass:{type:String,required:true},className:{type:St
light_guang_IF·2023-04-09 04:34

svg-symbol引用方法

【序】今天想为vue封装一个可以通过name就生成一个icon的组件，平时我们都是通过class来添加一个字体icon，但是看到ant-design-vue中是使用的svg-icon的，并且配合阿里的iconfont
陌客百里·2023-03-16 20:55

uni-app显示svg

我的项目是vue3的，找了几个插件都是vue2的，vue3里无法使用uni-app+vue2使用svg1：插件市场Vue-Svg-Icons2：插件市场uniapp封装svg-icon组件vue2require
浮若年华_7a56·2022-10-27 08:41

VUE + ElementUI + SVG +阿里iconfont

npm不过速度慢建立文件夹说明在common文件夹下面建立文件夹SvgIcon在SvgIcon文件夹下面添加index.vue文件index.vue文件配置如下exportdefault{name:'svg-icon
美好环环相扣·2022-10-25 22:09

vue中引入自定义icons(.svg)图标

中引入icons下载插件配置使用创建SvgIcon组件在components文件夹下新建SvgIcon文件夹，并在SvgIcon文件夹下新建index.vue文件exportdefault{name:'Svg-icon
CeongFan·2022-09-30 06:00

vue中引入.svg图标

创建SvgIcon组件在components文件夹下新建SvgIcon文件夹，并在SvgIcon文件夹下新建index.vue文件，内容如下：exportdefault{name:'svg-icon',
潘高PG·2022-02-19 11:30

7.Vue-cli3.0全局使用svg

一、安装svg-sprite-loadernpminstallsvg-sprite-loader-D二、编写svg-icon组件在src/components/icon文件夹下面创建svg-icon.vue
拖孩·2022-02-03 07:41

vue 图标选择器的实例代码

importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'//svgcomponent//registergloballyVue.component('svg-icon
·2021-11-12 19:20

在新项目中怎么使用svg-icon组件呢? (具体步骤)

为什么要使用svg而不直接使用字体图标?首先让我们先来一起了解一下什么是SVG,SVG是一种可缩放矢量图形（英语：ScalableVectorGraphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解，它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类使用SVG的优点:1.兼容现有图片能力前提
·2021-08-12 00:15

svg-icon在项目中的使用

index.jsimportVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'//svgcomponentimport'@/icons/iconFonts/iconfont.js'Vue.component('svg-icon
王康_Wang·2021-06-09 15:55

Vue 加载 svg

说明:项目是vcli3.x创建的注意:如果需要修改svg颜色,需要把svg的fiil和stroke的颜色值修改为currentColor,在svg-icon组件里面的className的传值对应的class
sindorina·2021-04-07 14:25

vue封装 svg-icon组件 并 vue/cli4配置 svg-sprite-loader, 报错：resolve is not defined

1，vue中封装svg-icon组件使用原因1，svg是矢量图，不会因为尺寸方法和缩小而失真2，阿里图库可以直接粘贴获取svg图标代码，方便快捷3，封装为组件后，更容易操作接下来我们一起来创造它吧1，创建组件
Queen_live·2020-09-12 23:28

vue + element-ui + axios + webpack + mock.js项目构建（简书前端）

目前在维护一个企业级vue框架，项目有更全面的功能，大家可以了解一下vue-admin当前项目github源码地址该项目为vue仿简书前端静态模板，功能：实现登陆，主页，详情等模块；公共：封装header组件，svg-icon
FBm2016·2020-09-12 08:47

Vue使用iconfont的svg组件

**路径：src/base/svg-icon/svg-icon.vue**exportdefault{props:{size:{type:[Number,String],default:20},iconname
螺旋铭·2020-09-10 21:15

vue中使用svg-icon封装的组件来引用iconfont

转自https://blog.csdn.net/shentibeitaokong/article/details/83039021
泠泠在路上·2020-09-10 18:41

在vue中封装一个svg组件

在vue中封装一个svg组件第一步：在vue脚手架生成的文件夹下的src/components创建一个Svg在components->xx.vueexportdefault{name:'svg-icon
hx_1199·2020-09-10 14:45

手摸手，带你优雅的使用 icon

这是花裤衩在掘金上发布的关于这个优雅的使用icon的过程这是关于如何自己封装一个组件上传npm库久在vue后台管理系统混迹的童鞋应该知道花裤衩的吧，我用了他的vue-admin-template模板，顺便学习了一下大佬的代码，里面有一个使用svg-icon
慢半拍、·2020-08-20 23:59

vue中封装svg-icon，因为版本问题，导致不显示

vue中封装svg-icon，因为版本问题，导致不显示封装svg-icon封装svg-icon组件参考这篇博客vue中使用本地svg，抽为全局组件svg-icon，很详细所以不重复讲解。
东书·2020-08-02 15:01

vue中引入.svg图标

创建SvgIcon组件在components文件夹下新建SvgIcon文件夹，并在SvgIcon文件夹下新建index.vue文件，内容如下：exportdefault{name:'svg-icon',
潘高·2020-08-01 01:35

Vue引入iconfont图标，使用svg-icon

iconfont真是太好用了，之前一直使用font-class方式来引用，但是iconfont说Symbol引用才是未来的主流，那么我们是一定要跟上主流的这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个SVG的集合，与另外两种相比具有如下特点：支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,
immocha·2020-07-31 18:51

探究svg-icon的实现原理

本文旨在研究如何实现svg-icon组件，并给出vue(v
回调的幸福时光·2020-07-09 02:19

vue中使用svg-icon

之前也写过一篇这样的文章，只需要配置在线地址，即可自动下载几个字体文件，但是呢，我发现还有一种更好的写法，也是大众化的写法，即svg标签，参考如何优雅的使用icon，可以完全参考这篇进行开发。我就是记录一下如何使用1在src目录新建一个icons目录，目录结构如下svg下面放iconfont的icon标签的svg标签文件，下下来复制粘贴即可使用index.js文件：importVuefrom'vu
shentibeitaokong·2020-06-26 09:50

vue 引入 svg（定义公共组件）

index.jsimportVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'//svg组件//registergloballyVue.component('svg-icon
肖ZE·2020-06-24 09:15

vue安装svg 依赖包

终端安装npmnpminstallsvg-sprite-loader--save-dev自定义组件svg_1.pngexportdefault{name:'svg-icon',props:{iconClass
7级先生·2020-02-23 09:53

vue中引入.svg图标，使用iconfont图标库

阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用，官方介绍创建SvgIcon组件exportdefault{name:'svg-icon
知足常乐晨·2019-12-22 19:25

svg-sprite-loader ( svg-icon) 使用

svg-sprite-loader可以多个svg图标合并.使用时只需根据合并的symbol的id即可.//项目使用VueCLI搭建1.首先svg-sprite-loadernpminstall-Dsvg-sprite-loader2.更改vue.config.jswebpack的配置chainWebpack:config=>{config.module.rules.delete('svg');//
Linon·2019-10-25 17:00

svg-sprite-loader ( svg-icon) 使用

svg-sprite-loader可以多个svg图标合并.使用时只需根据合并的symbol的id即可.//项目使用VueCLI搭建1.首先svg-sprite-loadernpminstall-Dsvg-sprite-loader2.更改vue.config.jswebpack的配置chainWebpack:config=>{config.module.rules.delete('svg');//
召喚師·2019-10-25 17:00
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他