docs: rename $img page to use-image and update examples

Author: danielroe

docs/content/4.api/2.$img.md docs/content/4.api/2.use-image.mddocs/content/4.api/2.$img.md renamed to docs/content/4.api/2.use-image.md

@@ -2,34 +2,34 @@
 aside: false
 ---
 
-# $img utility
+# `useImage` composable
 
-Sometimes it's required to directly use a generated image URL with applied transformations instead of `<nuxt-img>` and `<nuxt-picture>` components. This is where `$img` comes in.
+Sometimes you might need to use a generated image URL directly with applied transformations instead of the `<nuxt-img>` and `<nuxt-picture>` components. This is where `useImage()` comes in (and the helper function it returns, which you will often see referenced directly as `$img` or `img`).
 
 ## Usage
 
 ```js
-const $img = useImage()
+const img = useImage()
 
-$img(src, modifiers, options)
+img(src, modifiers, options)
 ```
 
 **Example:** Generate image URL for `backgroundImage` style.
 
 ```js
-const $img = useImage()
+const img = useImage()
 const backgroundStyles = computed(() => {
-  const imgUrl = $img('https://github.com/nuxt.png', { width: 100 })
+  const imgUrl = img('https://github.com/nuxt.png', { width: 100 })
   return { backgroundImage: `url('${imgUrl}')` }
 })
 ```
 
-### `$img.getSizes`
+### `img.getSizes`
 
 ```js
-const $img = useImage()
+const img = useImage()
 
-$img.getSizes(src, { sizes, modifiers });
+img.getSizes(src, { sizes, modifiers });
 ```
 
 ::alert{type="warning"}
@@ -61,9 +61,9 @@ const props = defineProps({
     default: '/img/header-bg.jpg'
   }
 })
-const $img = useImage()
+const img = useImage()
 const _srcset = computed(() => {
-  return $img.getSizes(props.src, {
+  return img.getSizes(props.src, {
     sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
     modifiers: {
       format: 'webp',
@@ -76,8 +76,8 @@ const _srcset = computed(() => {
 
 <template>
   <v-img
-    :lazy-src="$img(src, { width: 10, quality: 70 })"
-    :src="$img(src, { height, quality: 70 })"
+    :lazy-src="img(src, { width: 10, quality: 70 })"
+    :src="img(src, { height, quality: 70 })"
     :srcset="_srcset.srcset"
     :height="height"
     :sizes="_srcset.sizes"

docs/content/6.advanced/1.custom-provider.md

@@ -29,7 +29,7 @@ export function getImage(src, { modifiers, baseURL } = {}, { options, $img }) {
 - `modifiers`: List of image modifiers that are defined in the image component or as a preset.
 - `ctx`: (`ImageCTX`) Image module runtime context
   - `options`: (`CreateImageOptions`) Image module global runtime options
-  - `$img`: The [$img helper](/api/$img)
+  - `$img`: The [$img helper](/api/use-image)
 
 **Note:** Values in `ctx` might change. Use it with caution.