Upgrade fontsource and iconify

Author: zerodevx

README.md

@@ -65,7 +65,7 @@ both well, but spaces display better outside IDEs (I'm looking at you Github).
 
 ```json
 {
-  // ...
+  //...
   "printWidth": 100,
   "useTabs": false,
   "semi": false,
@@ -83,7 +83,7 @@ Add defence against `no-semi`:
 
 ```js
 module.exports = {
-  ...
+  //...
   rules: {
     'no-tabs': 'error',
     'no-unexpected-multiline': 'error'
@@ -98,11 +98,14 @@ defaults.
 
 ### Custom fonts
 
-Use `fontsource` for self-hosted open-source fonts.
+Use `@fontsource-variable` for self-hosted open-source fonts.
 
 ### Custom icons
 
-Use `iconify` to create your own tree-shaken open-source icon set. Add icons in `/src/lib/icons.js`.
+Use `@iconify/tailwind` plugin for high-performance css-only icons. Apply icon classes using
+`icon-[{prefix}--{name}]`. Install icon sets at `@iconify-json/{name}`. Only icons you use will be
+included in your build. Read more at
+[Iconify](https://github.com/iconify/iconify/tree/main/plugins/tailwind).
 
 ## License
 

index.mjs

@@ -39,8 +39,8 @@ await spinner('add tailwindcss', async () => {
   await $`cd ${name} && npx -y svelte-add@latest tailwindcss`
   await patchPackage(name, '+@tailwindcss/typography')
   await patchFiles(path.join(name, 'tailwind.config.cjs'), [
-    'plugins: []',
-    `plugins: [require('@tailwindcss/typography')]`
+    `plugins: [`,
+    `plugins: [require('@tailwindcss/typography'),`
   ])
 })
 
@@ -76,29 +76,29 @@ await spinner('add adapter-static', async () => {
 })
 
 await spinner('add fontsource', async () => {
-  await patchPackage(name, '+@fontsource/inter')
+  await patchPackage(name, '+@fontsource-variable/inter')
   await patchFiles(path.join(name, 'src', 'routes', '+layout.svelte'), [
     `<script>`,
-    `<script>import '@fontsource/inter/variable.css';`
+    `<script>import '@fontsource-variable/inter';`
   ])
   await patchFiles(
     path.join(name, 'tailwind.config.cjs'),
     [`const config`, `const dt = require('tailwindcss/defaultTheme');\n\nconst config`],
-    [`extend: {}`, `extend: { fontFamily: { sans: ['InterVariable', ...dt.fontFamily.sans] } }`]
+    [`extend: {}`, `extend: { fontFamily: { sans: ['Inter Variable', ...dt.fontFamily.sans] } }`]
   )
 })
 
 await spinner('add iconify', async () => {
-  await patchPackage(name, '+@iconify/svelte', '+@iconify-icons/mdi')
-  await fs.outputFile(
-    path.join(name, 'src', 'lib', 'icons.js'),
-    `import Icon, { addIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';\nimport check from '@iconify-icons/mdi/check';\n\naddIcon('check', check);\n\nexport { Icon as default }\n`
-  )
+  await patchPackage(name, '+@iconify/tailwind', '+@iconify-json/mdi')
   await patchFiles(
-    path.join(name, 'src', 'routes', '+page.svelte'),
-    [`<h1>`, `<script>import Icon from '$lib/icons'</script>\n\n<h1>`],
-    [`</p>`, `</p>\n\n<Icon class="w-12 h-12" icon='check' />\n`]
+    path.join(name, 'tailwind.config.cjs'),
+    [`const dt`, `const { addDynamicIconSelectors } = require('@iconify/tailwind')\nconst dt`],
+    [`plugins: [`, `plugins: [addDynamicIconSelectors(),`]
   )
+  await patchFiles(path.join(name, 'src', 'routes', '+page.svelte'), [
+    `</h1>`,
+    `</h1>\n<span class="icon-[mdi--heart] w-8 h-8 text-red-600 animate-pulse" />\n`
+  ])
 })
 
 echo`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodevx/sveltekit-starter",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Opinionated starter template for SvelteKit",
   "author": "Jason Lee <jason@zerodevx.com>",
   "scripts": {