ayoub 079702df17 Auto COMMIT for build : 7383 \n commit by: a.hassani <hassani.ayoub@gmail.com> \n with message : add all icons | il y a 9 mois | |
---|---|---|
ai | il y a 9 mois | |
bi | il y a 9 mois | |
bs | il y a 9 mois | |
cg | il y a 9 mois | |
ci | il y a 9 mois | |
fa | il y a 9 mois | |
fa6 | il y a 9 mois | |
fc | il y a 9 mois | |
fi | il y a 9 mois | |
gi | il y a 9 mois | |
go | il y a 9 mois | |
gr | il y a 9 mois | |
hi | il y a 9 mois | |
hi2 | il y a 9 mois | |
im | il y a 9 mois | |
io | il y a 9 mois | |
io5 | il y a 9 mois | |
lia | il y a 9 mois | |
lib | il y a 9 mois | |
lu | il y a 9 mois | |
md | il y a 9 mois | |
pi | il y a 9 mois | |
ri | il y a 9 mois | |
rx | il y a 9 mois | |
si | il y a 9 mois | |
sl | il y a 9 mois | |
tb | il y a 9 mois | |
tfi | il y a 9 mois | |
ti | il y a 9 mois | |
vsc | il y a 9 mois | |
wi | il y a 9 mois | |
LICENSE | il y a 9 mois | |
README.md | il y a 9 mois | |
index.d.ts | il y a 9 mois | |
index.js | il y a 9 mois | |
index.mjs | il y a 9 mois | |
package.json | il y a 9 mois |
Include popular icons in your React projects easily with @d3v4pp/svgs
, which utilizes ES6 imports that allows you to include only the icons that your project is using.
yarn add @d3v4pp/svgs
# or
npm install @d3v4pp/svgs --save
example usage
import { FaBeer } from "@d3v4pp/svgs/fa";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under @d3v4pp/svgs
you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from '@d3v4pp/svgs/md';
Note This option has not had a new release for some time. More info https://github.com/@d3v4pp/svgs/@d3v4pp/svgs/issues/593
If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.
yarn add @@d3v4pp/svgs
# or
npm install @@d3v4pp/svgs --save
example usage
import { FaBeer } from "@@d3v4pp/svgs/fa";
function Question() {
return (
<h3>
Lets go for a <FaBeer />?
</h3>
);
}
You can add more icons by submitting pull requests or creating issues.
You can configure @d3v4pp/svgs props using React Context API.
Requires React 16.3 or higher.
import { IconContext } from "@d3v4pp/svgs";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>;
Key | Default | Notes |
---|---|---|
color |
undefined (inherit) |
|
size |
1em |
|
className |
undefined |
|
style |
undefined |
Can overwrite size and color |
attr |
undefined |
Overwritten by other attributes |
title |
undefined |
Icon description for accessibility |
From version 3, vertical-align: middle
is not automatically given. Please use IconContext to specify className or specify an inline style.
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
className
StylingComponent
<IconContext.Provider value={{ className: '@d3v4pp/svgs' }}>
Dependencies on @types/@d3v4pp/svgs
can be deleted.
yarn remove @types/@d3v4pp/svgs
npm remove @types/@d3v4pp/svgs
./build-script.sh
will build the whole project. See also CI scripts for more information.
yarn
cd packages/@d3v4pp/svgs
yarn fetch # fetch icon sources
yarn build
SVG is supported by all major browsers. With @d3v4pp/svgs
, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.