React显示文件夹中SVG
import React from 'react';
import _ from 'lodash';
import styles from './iconPicker.less'; const requireContext = require.context('annotation/draw/svgs/', false, /^\.\/.*\.svg$/); export default class extends React.PureComponent {
render() {
return (
<ul className={styles.ul}>
{_.reduce(
requireContext.keys(),
(pre, cur) => [
...pre,
<li id={cur} key={cur} className={styles.li}><embed type="image/svg+xml" width={18} height={18} src={requireContext(cur)} /></li>,
],
[]
)}
</ul>
);
}
}
.ul {
list-style-type: none;
border: 1px solid #dedede;
padding: 0px;
margin: 4px 0px 4px 0px;
position: relative;
display: flow-root;
.li {
float: left;
border: 1px solid #fff;
line-height: 12px;
vertical-align: middle;
margin: 2px;
padding: 2px;
&:hover {
border: 1px solid rgb(3, 189, 202);
box-shadow:0 0 1px rgb(9, 180, 223);
}
}
}
React显示文件夹中SVG的更多相关文章
- 使用.NET统计文件夹中文件总数
软件下载: http://hovertree.com/h/bjaf/hwqtjwjs.htm 截图: 使用方法:点击按钮,选择文件夹,就可以显示文件夹中包含的文件总数. 这个项目包含在HoverTre ...
- 如何在QFileSystemModel中显示文件夹的大小
在Qt里面,有一种Model/View框架,Model负责收集信息,View负责显示信息.QFileSystemModel可以读取文件大小,但是默认情况下不能读取文件夹大小. QFileSystemM ...
- webpack 打包出多个HTML文件,多个js文件,图片文件放置到指定文件夹中
一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...
- XP系统显示文件夹选项属性被删除解决注册表
Title:XP系统显示文件夹选项属性被删除解决注册表 -- 2010-11-18 13:17 昨天中了个毒窝,还有恶意软件,十分不爽. 开始恶意软件把显示所有文件夹给删除了,去找了个注册表,重新注册 ...
- webstorm打开后无法显示文件夹目录
最近接触webstorm,上午研究怎么删除项目,不小心把项目在目录中删除了,然后重新创建时,无法显示了. 状况类似这样的 百度上搜了一些没搜到,关键字是“webstorm 项目 目录 无法显示文件夹” ...
- React Native工程中TSLint静态检查工具的探索之路
建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时,只能全工程检查代码, ...
- 【php】Apache无法自己主动跳转却显示文件夹与php无法连接mysql数据库的解决方式
一.Apache无法自己主动跳转却显示文件夹 Apache无法自己主动跳转却显示文件夹这是由于Apacheserver下conf/httpd.conf没有配置好,其默认是不跳转,直接显示文件夹 首先, ...
- React Native开发中自动打包脚本
React Native开发中自动打包脚本 在日常的RN开发中,我们避免不了需要将我们编写的代码编译成安装包,然后生成二维码,供需要测试的人员扫描下载.但是对于非原生的开发人员来说,可能不知如何使用X ...
- React和Vue中,是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
随机推荐
- php语法学习:轻松看懂PHP语言
基础语法 开头结尾 PHP脚本以 "<?php " 开头以 "?>" 结尾 <!DOCTYPE html> <html>&l ...
- 订购一套Arduino UNO r3入门套件
若需要arduino套件经济版请点击以下链接跳转: http://item.taobao.com/item.htm?id=36759198826 这就开始了吗?希望有所收获吧-!
- 2017CCPC秦皇岛
热身赛 B题 Smartphone: 大整数相乘 Time Limit: 1 Second Memory Limit: 65536 KBHelianthuswolf Co. Ltd. is a mul ...
- SOAP扩展PHP轻松实现WebService
最近在一个PHP项目中对接外部接口涉及到WebService,搜索引擎上相关文章不是很多,找到的大都是引用一个号称很强大的开源软件 NuSOAP(下载地址:http://sourceforge.net ...
- git--客户端管理工具初步使用
说点废话哈 小白一枚, 今年3月份进入自己的第一家公司, 开始成为前端中的一份子,好在公司里有位和我一同进来的一位老哥带着我,从老哥身上学到的知识不多,(因为和老哥只相处工作了三个月,因为家里的事情, ...
- WePy--使用zanUI组件
因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo (感谢); 我的做法是将 源码下了下来, 源码 ...
- HDU-2955 Robberies 浮点数01背包 自变量和因变量位置互换
题目链接:https://cn.vjudge.net/problem/HDU-2955 题意 突然想找几个银行抢钱. 给出各银行的钱数和被抓的概率,以及能容忍的最大被抓概率. 问他最多能抢到多少钱? ...
- 2019-03-15 使用Request POST获取CNABS网站上JSON格式的表格数据,并解析出来用xlwt写到Excel中
import requests import xlwt url = 'https://v1.cn-abs.com/ajax/ChartMarketHandler.ashx' headers={ 'Us ...
- 紫书 习题7-8 UVa 12107 (IDA*)
参考了这哥们的博客 https://blog.csdn.net/hyqsblog/article/details/46980287 (1)atoi可以char数组转int, 头文件 cstdlib ...
- List<T>与List<?>的区别
T 代表某一类型 ? 代表任意类型.. T因为代表是某一确定类型..所以你可以使用它..比如你有个List<T>类型的变量tList 你可以用T t = tList.get(1);也可以用 ...