react-next 引入阿里云iconfont 图标（适用所有）

最新推荐文章于 2024-01-30 11:05:53 发布
最新推荐文章于 2024-01-30 11:05:53 发布
阅读量1k 收藏
点赞数 1
分类专栏： 笔记 教程 文章标签： vue css html html5 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43541326/article/details/106929122
版权

进入 阿里云图标库搜索想要的图标
地址：

https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

在这里插入图片描述
随便找一个 加入购物车
在这里插入图片描述
添加到项目中
在这里插入图片描述
test是我创建好的项目
在这里插入图片描述
复制代码 到你项目的css中
在这里插入图片描述
加入到自己的css中
在这里插入图片描述

然后点击这个
在这里插入图片描述

把这个圈起来的代码也复制过去
在这里插入图片描述

就是这样的 注意我箭头指向的三个名称一定要一致一致一致一致
在这里插入图片描述
然后使用

在这里插入图片描述
className 就是刚刚我强调的
在这里插入图片描述

不想秃头i
关注
专栏目录
React-Native 使用 React-Native-Vector-Icons 引入 iconfont 文字矢量图标
journeyIT的博客
01-16 1500
iconfont(阿里巴巴矢量图标库) 1.使用命令行工具进行 react-native-vector-icons 工具的安装： npm install react-native-vector-icons --save 安装完成之后在package.json文件中可以看到新增了一行 "react-native-vector-icons": "^5.0.0", 2.使用命令 rea...
nextjs中阿里icon库的引入使用
祥哥的说
10-30 2692
阿里icon库地址 引入方法： 1、font class引入 在我的项目myblog中，下载至本地 解压之后在demo_index.html文件中选择图标引入方式，blog中使用了font class的引入方法，即将iconfont.css文件，放到public中进行维护，同时在layout中引入,注意这个这里的href路径，使用的是根路径格式，相等路径不好使。 <link rel="stylesheet" href="/aliIcon/iconfont.css"></link>
next.js 中iconfont Symbol 加载svg优化 方法二
小码的博客
01-28 493
一直想优化iconfont Symbol加载方法，上一次讲到找到iconfont Symbol优化（https://blog.csdn.net/qq_41211900/article/details/109570775）结果测试网站页面时，方法js业务处理时间变大，这个不愿看到了，但是解决了icon等页面加载完才慢慢显示出来等问题。 如是又想到了一种转换办法，转换成一个json数据，再读取的办法，可以减少js业务处理时间，还能提升网页速度。 1.制作一个页面储存iconfont Symbol内容 新建
next.js 中iconfont Symbol 加载svg优化
小码的博客
11-09 973
next.js 中iconfontSymbol 加载svg优化。 按照常规方法加载iconfontSymbol （例如：https://blog.csdn.net/qq_41211900/article/details/108443521） 页面会生成这样： <svg class="icon " aria-hidden="true"><use xlink:href="#icon-mobile"> <svg id="icon-mobile" viewBox="0 ..
iconfont引入方法
热门推荐
仲阳拾贰
06-12 2万+
iconfont引入方法 一 准备 1 进入iconfont这个网站 2 选择你需要的图标，并且将它加入购物车。 3 点击购物车，下方有三个选项，选择下载代码，这个就是下面的所说的项目 二 引入 方式一：unicode引用 unicode是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持ie6+，及所有现代浏览器。 支持按字体的方式去动...
react next.js中引用iconfont中的svgsymbol模式方法
小码的博客
09-07 1033
import React, { Component,memo } from 'react' class icon extends Component { componentDidMount() { if(typeof window !== 'undefined'){ require('../public/js/iconfont.js'); } } render() { //console.log("props",this.props); const {classNa.
Nuxt.js 使用 iconfont 导入流程
卡尔特斯
08-31 342
如果没有 assets 文件夹，需要手动创建。 下载 iconfont 文件，解压出来！ 在 assets 文件夹中创建一个 iconfont 文件夹，将上面解压出来的文件拖到 /assets/iconfont 文件夹中。 然后找到 nuxt.config.js 添加 css 配置 css: [ '~/assets/iconfont/iconfont.css' ] 使用 ...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩
05-25
react-iconfont-cli 用纯JS把iconfont.cn的图标转换成React组件，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件，支持es6和typescript...
基于Typescript的react-native-iconfont-cli图标转换工具设计源码
最新发布
06-01
本源码是基于Typescript开发的react-native-iconfont-cli图标转换工具设计，包含55个文件，其中包括16个.ts文件，8个.template文件，以及7个.json文件。此外，还包括6个.js文件，5个.png文件，以及5个.tsx文件。此外...
【React】前端项目引入阿里图标
m0_61049675的博客
01-30 1066
注意：你的icon名字 icon-sousuokuang为图片红框部分。
nuxt 项目引入自定义svg图标和iconfont.js
cpa0701的博客
05-07 1586
引入iconfont.js 因为iconfont相当于插件了，所以要在nuxt.config.js中的plugins中进行注入 plugins: [{ src: "./static/font/iconfont.js", ssr: false }] ssr要使用false，因为iconfont.js中有用到window，在服务端渲染时会报错 不要在组件中引用，在nuxt中要当成插件引入 引...
next.js引入ant design同时也要开启css modules
zhumengzj的博客
02-14 7796
参考：https://www.yuque.com/steven-kkr5g/aza/ig3x9w Next.js 配合使用antd、less (Integration with Antd) 这个配置配置在NEXT.js和ANTD的官方都有涉及，这个官方的@zeit/next-less组件是不适合直接使用antd配置的，问的人很多，没有实际的代码。所以我们写一下。 1. 问题列举/Issues...
Next.js脚手架进阶 — 完美契合ant-design
weixin_33711647的博客
12-05 685
前言 上次入门完了之后感觉意犹未尽，总觉得这个脚手架还是不太完美，还有可以改进的地方，所以为了与人方便也是与己方便，就继续写几篇吧～
iconfont引入到项目中
enthan809882的博客
11-03 2540
iconfont官网： https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3 挑选任意一个图标，加入购物车，下载代码，将代码复制到web项目。 文件结构如图： 页面中引入文件： <link rel="stylesheet" href="/static/iconfont/font_43saalznrs...
hexo next 主题字体图标失效（丢失）
曹先森的博客
01-08 3632
hexo next 字体图标都不显示了， 报错如下： localhost/:1 Refused to apply style from 'http://localhost:4000/lib/font-awesome/css/font-awesome.min.css?v=4.6.2' because its MIME type ('text/html') is not a supported st...
引入iconfont报错
weixin_37215881的博客
04-12 2760
./iconfont.woff?t=1555047063843 in ./node_modules/css-loader??ref–5-1!./node_modules/postcss-loader 解决方法： iconfont.css下url改成当前目录下
uni-app 自定义导航栏图标+事件（一）
杨葱儿
09-16 1553
一、阿里巴巴矢量图选出自己想要的图标：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 添加到自己的项目里，下载至桌面 二、将解压好的项目打开，将两个文件复制到自己项目的static文件夹中： 三、在page页面去使用 "titleNView":{ "type":"default", "buttons":[{ "text": "\ue618", "fontSrc": "/static/fo..
react-native 集成阿里云视频播放器sdk （Android、ios）
03-31
1. 下载阿里云视频播放器SDK，解压后得到两个文件夹：aliyun-sdk-player-android和aliyun-sdk-player-ios。 2. 在React Native项目中安装react-native-aliplayer插件，使用命令：npm install react-native-aliplayer --save。 3. 在android/app/build.gradle文件中添加如下代码： ```gradle dependencies { implementation project(':react-native-aliplayer') ... } ``` 4. 在MainActivity.java中添加如下代码： ```java import com.aliplayer.AliPlayerPackage; public class MainActivity extends ReactActivity { @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new AliPlayerPackage() ); } ... } ``` 5. 在ios项目中，将aliyun-sdk-player-ios文件夹拖入项目中，并在Build Phases的Link Binary With Libraries中添加以下库： - libstdc++.6.tbd - libz.tbd - libresolv.tbd - libbz2.tbd - AVFoundation.framework - AudioToolbox.framework - CoreMedia.framework - MediaPlayer.framework - SystemConfiguration.framework - UIKit.framework - VideoToolbox.framework 6. 在AppDelegate.m中添加如下代码： ```objective-c #import "AliPlayer.h" ... - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... [AliPlayer registerWithAppKey:@"your-app-key"]; ... } ``` 7. 在React Native中使用AliPlayer组件进行视频播放，例如： ```jsx import React from 'react'; import { View } from 'react-native'; import AliPlayer from 'react-native-aliplayer'; export default function App() { return ( <View style={{ flex: 1 }}> <AliPlayer source={{ uri: 'http://player.alicdn.com/video/aliyunmedia.mp4', }} style={{ flex: 1 }} /> </View> ); } ``` 以上就是React Native集成阿里云视频播放器SDK的步骤。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值