Comments (2)
Jacob, thanks for the tip! I do actually use a one of those react svg loaders, but your svg-icons repo is key. That way, I can make an alternate wrapper component to the type you export here. Very cool, and thanks again!
from styled-icons.
Hey, definitely - two thoughts here:
First, technically you can use the style
prop with Styled Icons already and it'll work, but it does also require styled-components
, so that's not likely what you were looking for.
Second, the way I'm building the icon components here is by maintaining all the icon SVG files in the svg-icons repository, and then transforming those SVGs here into React components. That lets me put all the CI work into cleaning up and optimizing the SVGs into the svg-icons
build, and just leave the React things here.
It's not well documented, but what I've been doing for recent projects myself is to directly import the SVG files from @svg-icons, and then configure Webpack with a SVG-to-React loader to build the React component at compile-time. Some example Webpack loaders:
- https://react-svgr.com/docs/webpack/
- https://www.npmjs.com/package/next-react-svg (I've used this with Next.js projects)
But you could use any loader for Webpack or Rollup or whatever your preferred builder might be to transform the SVGs into React components.
I haven't had time to build an icon browser website for @svg-icons, but it's all the same icons as Styled Icons here, so you can just use the same website.
After configuring the loader, you import like this:
// Replace either of these:
import {IconName} from '@styled-icons/pack'
import {IconName} from '@styled-icons/pack/IconName'
// with this (note that the icon filenames are kebab-cased):
import IconName from '@svg-icons/pack/icon-name.svg'
Importing the icon SVGs directly like this should already support style
: <IconName style={{...}} />
from styled-icons.
Related Issues (20)
- Fluent UI Icons HOT 4
- Error during of import during rendering HOT 3
- Documentation fix HOT 3
- Server-side icon rendering? HOT 6
- remix-line icon pack does not contain the hashtag icon HOT 2
- StyledComponents logo error HOT 2
- Documentation update for "Base Icon Styles" HOT 4
- website down? HOT 3
- Is it possible to use styled-icons in a pseudo :before or :after element? HOT 1
- More compact website? HOT 3
- @styled-icons/styled-icon dependencies causing duplication due to older versions of @emotion/is-prop-valid HOT 2
- ```yarn add styled-icons --network-timeout 100000```
- fa-solid 10.46 looks broken HOT 2
- Folder name case sensitivity issue HOT 1
- Hero Icons thumb icon renamed HOT 3
- Reporting a vulnerability HOT 1
- styled-icons.dev seems to be down HOT 2
- Update to style-components v6
- Styled-Icons failing with styled-components dependencies HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-icons.