Other generated assets
Besides components, Plasmic also generates other useful assets that you need to use in your application.
Global variants are represented in the generated code as React contexts.
If your components make use of global variants, you can provide the activated global variant value using the generated context provider. Usually you can do this at the root of your React tree to cover all components rendered across your application, though you can also specify different global variant values for different sections of the product — it’s just a React context, and you can just use it as such.
For example, here’s how you might use a
Theme global variant to toggle between dark and light:
Screen global variant is used to create responsive designs triggered by breakpoints.
This enables Plasmic to express variations beyond what can be achieved in CSS media queries, and enable arbitrary rendering changes.
This global variant is special because it is automatically provided by Plasmic where needed.
All the SVG icons that you have in Plasmic are automatically generated as React components. You can use them as you would use any icon library:
By default, these icon components are sized to be
1em, with fill / stroke colors set to
currentColor, so you can size them using the
font-size css property, and color them using the
color css property, just as you can with similar icon libraries — except they are your icons!