Server‑Side Rendering (SSR) & CSP
Defaults
- Icons render as static VNodes by default (no
innerHTML
). - CSP‑friendly (no inline scripts) and hydration‑safe.
Nuxt 3 example
ts
// plugins/evora-icons.ts
import { defineNuxtPlugin } from '#app'
import { createEvoraIcons } from '@evora-ui/icons-vue'
import { EvUser, EvUserFilled } from '@evora-ui/icons-vue/icons'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(createEvoraIcons({
icons: { user: EvUser, 'user-filled': EvUserFilled },
}))
})
vue
<template>
<EvIcon name="user" />
<EvIcon name="user-filled" />
<!-- Also works with direct components -->
<EvUser />
<EvUserFilled />
</template>
Notes
- Do not disable static VNodes (
--no-static-vnode
) for SSR builds. - Use
color
andsize
props; avoid mutating SVG internals in SSR.