Comments (6)
Hello @FluidSense. Thank you, glad you like it so far!
It's up to you really. There's no method for rendering an icon outside of a Sanity studio. It was previously discussed to implement such a method here but I decided that it's not the responsibility of this plugin to render icons in external React projects. How ever there is a helper function available to render icons as preview media inside a Sanity Studio example here.
With all that said, if your retrieved data from Sanity look like this:
Then you could create a dynamic icon generator in your external React project like so:
import * as Icons from "react-icons/fa";
const DynamicFontAwesomeIcon = ({ name }) => Icons[name];
export default function App() {
const sanityData = {
_type: "iconPicker",
name: "FaBeer",
provider: "fa",
_updatedAt: "2021-07-25T02:30:43.141Z"
};
const Icon = DynamicFontAwesomeIcon(sanityData);
return (
<div className="App">
<Icon />
</div>
);
}
Note that in this example I'm using the option outputFormat: 'react'
for the icon picker in the studio which will return data with the same naming convention as react-icons. The name
key can then be used to render the correct icon. The provider
key could also be used to implement logic for knowing which icon provider to use (using only fa aka FontAwesome in the example above).
from sanity-plugin-icon-picker.
Quick question: if I used the above methods, for example for all three libraries, and user ends up using 2-3 icons, does that increase the file size drastically? or only the imported item will be loaded?
If yes, I would prefer a raw svg along with the data so that i can just render the SVG myself.
{
_type: "iconPicker",
name: "FaBeer",
provider: "fa",
svg: "<svg stroke="currentColor">..//content..</svg>"
};
from sanity-plugin-icon-picker.
Thanks for the quick answer! I'll go ahead and implement a component similar to the one in your example, and include different providers!
from sanity-plugin-icon-picker.
Quick question: if I used the above methods, for example for all three libraries, and user ends up using 2-3 icons, does that increase the file size drastically? or only the imported item will be loaded?
It imports the whole module and destroys performance. My Lighthouse score plummeted, mainly because of the time to interactive increasing to 9 seconds, on localhost...
I see this "solution" given all the time but it only makes sense for SPAs where you don't care about loading speed that much (at least not for SEO's sake).
I agree that the best way would be to just provide the SVG code from sanity (or, if anyone else has a better idea...)
from sanity-plugin-icon-picker.
@ovsw Yeah, providing it as raw svg or as svg image would save a lot of bundle size for sure.
from sanity-plugin-icon-picker.
Thanks for the feedback @surjithctly @ovsw. Created a draft PR for this just now, feel free to share your thoughts there #39
from sanity-plugin-icon-picker.
Related Issues (20)
- Icons are a bit cut of HOT 2
- DeprecationWarning: Invalid `main` field HOT 4
- Sanity V3 Upgrade? HOT 9
- Output format for react does not work in V3 HOT 4
- Next.js embedded Studio: Global CSS cannot be imported from within node_modules. HOT 2
- Deploying NextJS embedded studio breaks studio HOT 1
- Don't show tabs if only one provider is set
- Global css cannot be imported from within node_modules error HOT 5
- Large front-end bundles? HOT 17
- Stored SVG is not available in GraphQL HOT 5
- Building Next.js app with nested Sanity Studio is broken by the plugin HOT 2
- Application error: a client-side exception has occurred (see the browser console for more information). HOT 2
- Preview module does not work with custom providers HOT 2
- Using custom provider breaks sanity codegen HOT 2
- Error on production and built but not on development HOT 1
- Support for font awesome 6 HOT 1
- Read-only field HOT 7
- Tree shaking is not possible HOT 4
- Icons are cut off in MenuButton
- Translate the strings
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 sanity-plugin-icon-picker.