icons使用

最新推荐文章于 2023-10-20 15:49:16 发布
最新推荐文章于 2023-10-20 15:49:16 发布
阅读量468 收藏
点赞数
原文链接：http://www.cnblogs.com/ampl/p/9308538.html
版权

1、将选中图标加入项目

 

2、unicode方式查看连接在线连接

3、复制代码到样式表

4、引用样式，并设置I标签,颜色和大小可以通过设置i标签color和font-size进行调整

<i class='iconfont' style='font-size:16px'>&#xe73e;</i>

 

 
 
 
 

 

转载于:https://www.cnblogs.com/ampl/p/9308538.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30467087
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
icones：支持即时搜索的图标资源管理器，尤雨溪等开发者赞助支持

				
			

			

				

					osfront的博客
				

				

					08-26
					
					371
					
				

			

		

		

			
				
【导语】：具有即时搜索功能的图标资源管理器，拥有数量丰富的图标库。
简介
icones 是一个具有即时搜索功能的图标资源管理器，拥有数量丰富的图标库，支持模糊搜索、图标字体打包、SVG 下载、类别过滤、脚本复制、暗黑模式等功能。






项目地址：
https://github.com/antfu/icones
在线体验地址：
https://icones.js.org/collection/carbon
功能简介

即时模糊搜索，全部在本地完成，不需要网络查询

打包，选择图表并运行打包成相应的图标字

			
		

	



                

              
                



	

		

			

				
					
xicons:SVG VueReact组件是由fluentui系统图标，离子子，蚂蚁设计图标，材料设计图标和Font-Awesome集成而成的。 （Vue3，Vue2，React，SVG）

				
			

			

				

					05-13
				

			

		

		

			
				
Xicons
 English·
包括vicons （vue3）， ricons （react）， sicons （svg）和v2icons （vue2）。
 SVG Vue / React组件集成了 ，  ，  ，  ， 和 。
 还提供了用于自定义颜色和大小的实用程序图标组件。
图标预览和搜索
安装
图标安装
 # Install packages on your demand
# For react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
# For vue3

			
		

	



                


  
              

                


	

		

			

				
					
icones::high_voltage:具有即时搜索功能的图标资源管理器，由Iconify提供支持

				
			

			

				

					03-18
				

			

		

		

			
				
伊科内斯
带有即时搜索功能的Icon Explorer，由提供支持
电子即将来临...
 黑暗模式现已上线！
特征
即时模糊搜索-所有操作均在本地完成，无需网络查询！
 袋子-选择您的图标，然后将它们包装成现成的图标字体！ 就是从这个XD诞生的
复制用法脚本
SVG直接下载
移动友好
收藏书签
分类过滤器
暗模式
使用和Vue 3构建
如果您喜欢它的构建方式，请尝试   ，由Icônes制作的自以为是的入门模板
社区
待办事项
电子客户端（即将推出！）
 全离线模式-打包所有图标
执照
麻省理工学院-Anthony Fu 2020

			
		

	





	

		

			

				
					
vue3 使用icones图标库

				
			

			

				

					m0_58289854的博客
				

				

					04-18
					
					645
					
				

			

		

		

			
				
可以通过类自定义图标颜色大小。

			
		

	



		

			
		



	

		

			

				
					
阿里 icons的使用(其实可以很简单)

				
			

			

				

					a5500669的博客
				

				

					06-01
					
					770
					
				

			

		

		

			
				
hello，大家好！本着开源的精神，我今天给大家分享一个在线使用阿里icons的办法(至于好用不好用，谁用谁知道)。大家有钱没钱的都过来瞧瞧呀！(哎呀，说的太好了，看来又要解锁一门新技能了)
步骤：1、首先，你得有一个阿里icon的账号吧，这个就不多说了；
2、其次，创建一个项目，并往里添加你要用的图标；
效果图如下：

attention please: 这里2点...

			
		

	





	

		

			

				
					
go.js中的图标（icons）的使用

				
			

			

				

					weixin_34355715的博客
				

				

					03-10
					
					1124
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用

					
最新发布

				
			

			

				

					u011843342的博客
				

				

					10-20
					
					1万+
					
				

			

		

		

			
				
之前一直naive-ui搭配使用的是xicons，后来发现Iconify支持的图标合集更多，因此转而使用Iconify。与FontAwesome不同的是，Iconify配合Icones相当于是一个合集，Iconify提供了快捷引入图标的方式，而Icones是一个大的图标库，收集了大量MIT协议、Apache 2.0开源的图标文件。Iconify 支持的框架很多，本文以 Vue 3 作为介绍。

			
		

	





	

		

			

				
					
icons

				
			

			

				

					04-01
				

			

		

		

			
				
icons.rar 介绍了关于icons的详细说明，提供其它知识的技术资料的下载。

			
		

	





	

		

			

				
					
icons:File-Icons包使用的自定义图标字体的源文件

				
			

			

				

					04-29
				

			

		

		

			
				
 失败的话，您可以使用将SVG嵌入到问题本身中：  ```svg <!-- Replace this with the contents of your SVG file. --> ```   注意：需要空行将与内容分开。 有关Markdown中HTML处理的详细信息，请参阅。

			
		

	





	

		

			

				
					
themify-icons:像素完美，手工制作的图标，从Apple iOS 7汲取灵感

				
			

			

				

					05-23
				

			

		

		

			
				
 您可以出于任何目的使用或分发它，无论是个人还是商业目的。 此图标集是Web设计人员和开发人员的必备工具。  可以在上查看所有图标 安装 $ bower install --save themify-icons 用法 在应用程序index.html包含...

			
		

	





	

		

			

				
					
simple-line-icons：简单和最小线条图标

				
			

			

				

					02-05
				

			

		

		

			
				
简单线图标
 具有CSS，SASS，LESS和Web字体文件的简单线条图标。
预览和文件
您可以在找到完整图标集的备忘单
安装
通过 
npm install simple-line-icons --save
 通过
bower install simple-line-icons --save
 通过
 另外，您也可以克隆或为zip。
 如果您是设计师，则可以在项目中使用此。
自定义LESS / SASS变量
减：
 @simple-line-font-path     : " /path/to/font/files " ;
@simple-line-font-family   : " des

			
		

	





	

		

			

				
					
程序设计icons小图标

				
			

			

				

					10-18
				

			

		

		

			
				
icons小图标，网页设计、程序设计常用图标集合，手机方便使用

			
		

	





	

		

			

				
					
react-icons:使用内联 SVG 为图标响应组件

				
			

			

				

					06-13
				

			

		

		

			
				
使用内联 SVG 为图标响应组件 React多个 SVG 元素，这意味着您可以将图标代码直接嵌入到组件中。 内联 SVG 具有，通过使用它，您可以保存 HTTP 请求，图标仍然可以缓存，您可以使用 CSS 控制它们。  这是带有 2 个...

			
		

	





	

		

			

				
					
icon在项目中的使用

				
			

			

				

					weixin_43550562的博客
				

				

					04-14
					
					445
					
				

			

		

		

			
				
将icons文件夹放在src目录下方

svg文件夹里面都是一些svg文件

index.js里面则是配备的前端工程化js文件
import Vue from 'vue'
import SvgIcon from '@c/SvgIcon'

Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, ...

			
		

	





	

		

			

				
					
vue项目使用icons矢量图标

				
			

			

				

					huqiwuhuiju的博客
				

				

					05-06
					
					420
					
				

			

		

		

			
				
综合参考地址：

1、vue中使用svg类型图标

2、Vue中引入svg图标的方式

3、在vue-cli3中优雅的使用 icon

4、vue运行svg文件


			
		

	





	

		

			

				
					
web项目如何使用Material Icons

				
			

			

				

					weixin_33958366的博客
				

				

					03-02
					
					663
					
				

			

		

		

			
				
使用文档链接
图标库

最简单的使用方法

引入
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
使用
<i class="material-icons">face</i>
对于不支持连字的浏览器，请回退到使用数字字符引用指定图标：
&...

			
		

	





	

		

			

				
					
vue3 通过naive-ui 使用xicons

				
			

			

				

					weixin_42157672的博客
				

				

					06-08
					
					8711
					
				

			

		

		

			
				
vue3 通过naive-ui 使用xicons

			
		

	





	

		

			

				
					
iconcls引用

				
			

			

				

					SdWfZhaoFan的博客
				

				

					07-12
					
					632
					
				

			

		

		

			
				
要想在iconcls中引用其他的图标，拓展themes文件的icon.css

			
		

	





	

		

			

				
					
vite-plugin-svg-icons 使用

				
			

			

				

					09-07
				

			

		

		

			
				
vite-plugin-svg-icons 是一个 Vite 插件，用于在项目中使用 SVG 图标。它可以将 SVG 图标转换为可在项目中使用的 Vue 组件或 React 组件，并提供了一些方便的功能。

要使用 vite-plugin-svg-icons，首先需要安装它。在你的项目根目录下运行以下命令：

```
npm install vite-plugin-svg-icons --save-dev
```

或者使用 yarn：

```
yarn add vite-plugin-svg-icons --dev
```

安装完成后，在你的 Vite 配置文件（一般是 `vite.config.js`）中添加以下代码：

```javascript
import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    svgIcons()
  ]
})
```

这样就完成了插件的配置。接下来，你可以在你的项目中使用 SVG 图标了。

假设你有一个名为 `logo.svg` 的 SVG 图标文件，在你的 Vue 或 React 组件中引入它：

```javascript
import { VueComponent as Logo } from '@/icons/logo.svg'

// 使用 Logo 组件
```

这样就可以使用 `Logo` 组件来展示 `logo.svg` 的内容了。

vite-plugin-svg-icons 还提供了一些额外的功能，比如自动导入所有 SVG 图标、配置图标输出目录等。你可以在插件的文档中找到更多详细的用法和配置选项。

希望能帮到你！如果有任何问题，请随时提问。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值