It just doesn't work. I followed the instructions in the README, but nothing happens.
|
|
| Operating system |
Windows 10.0.26200 |
| CPU |
Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz (8 cores) |
| Node.js version |
v22.23.2 |
| nuxt/cli version |
3.37.0 |
| Package manager |
pnpm@11.20.0 |
| Nuxt version |
4.5.2 |
| Nitro version |
2.13.4 |
| Builder |
vite@8.2.1 |
| Config |
compatibilityDate, css, dayjs, devtools, fonts, icon, ignore, modules, vite |
| Modules |
@nuxt/eslint@1.17.0, @nuxt/fonts@0.14.0, @nuxt/icon@2.4.1, @nuxt/image@2.1.0, @vueuse/nuxt@14.4.0, dayjs-nuxt@2.1.11 ** |
// nuxt.config.ts
export default defineNuxtConfig({
...
modules: [
...
'@nuxt/icon',
],
icon: {
mode: 'svg',
clientBundle: {
scan: true,
includeCustomCollections: true,
},
},
})
// app.config.ts
export default defineAppConfig({
icon: {
customize: (content: string, name: string, prefix: string, provider: string) => {
if (prefix !== 'tabler') return content // Ignore Prefix
return content
.replace(/stroke-width="[^"]*"/g, `stroke-width="5"`) // Change stroke width to 5
.replace(/stroke="[^"]*"/g, `stroke="#FF5733"`) // Change stroke color to red
.replace(/fill="[^"]*"/g, `fill="#FF5733"`) // Change fill color to red
.replace(/animation-duration="[^"]*"/g, `animation-duration="1s"`) // Change animation duration to 1s (for animated icons)
.replace(/opacity="[^"]*"/g, `opacity="0.8"`);// Change opacity to 0.8
}
}
})
// Code in the project
<Icon
name="tabler:bulb"
class="-ml-0.5 mb-0.5 inline-block"
/>
// Rendered icon
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--tabler -ml-0.5 mb-0.5 inline-block"
style=""
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6"
></path>
</svg>
It just doesn't work. I followed the instructions in the README, but nothing happens.
Windows 10.0.26200Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz (8 cores)v22.23.23.37.0pnpm@11.20.04.5.22.13.4vite@8.2.1compatibilityDate,css,dayjs,devtools,fonts,icon,ignore,modules,vite@nuxt/eslint@1.17.0,@nuxt/fonts@0.14.0,@nuxt/icon@2.4.1,@nuxt/image@2.1.0,@vueuse/nuxt@14.4.0,dayjs-nuxt@2.1.11**