Icons प्रीसेट

UnoCSS के लिए Pure CSS के साथ कोई भी आइकन उपयोग करें।

TIP

अनुशंसित पढ़ना: Pure CSS में Icons

आइकनों का उपयोग करने के लिए निम्न 규規ों का पालन करें

<prefix><collection>-<icon>
<prefix><collection>:<icon>

उदाहरण के लिए:

html

<!-- Phosphor आइकन्स से एक बेसिक एंकर आइकन -->
<div class="i-ph-anchor-simple-thin" />
<!-- Material Design Icons से एक नारंगी अलार्म -->
<div class="i-mdi-alarm text-orange-400" />
<!-- एक बड़ा Vue लोगो -->
<div class="i-logos-vue text-3xl" />
<!-- लाइट मोड में सूर्य, डार्क मोड में चंद्रमा, Carbon से -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- हँसी का Twemoji, होवर करने पर आँसू में बदल जाता है -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

Hover it

सभी उपलब्ध आइकन देखें।

इंस्टॉल

pnpmyarnnpmbun

bash

pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

bash

yarn add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

bash

npm install -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

bash

bun add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

हम आइकनों के डेटा स्रोत के रूप में Iconify का उपयोग करते हैं। आपको @iconify-json/* पैटर्न का पालन करके संबंधित आइकन-सेट को devDependencies में इंस्टॉल करने की आवश्यकता है। उदाहरण के लिए, Material Design Icons के लिए @iconify-json/mdi, Tabler के लिए @iconify-json/tabler। आप सभी उपलब्ध संग्रहों के लिए Icônes या Iconify देख सकते हैं।

import presetIcons from '@unocss/preset-icons'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({ /* विकल्प */ }),
    // ...अन्य प्रीसेट्स
  ],
})

TIP

यह प्रीसेट unocss पैकेज में शामिल है, आप इसे वहाँ से भी आयात कर सकते हैं:

import { presetIcons } from 'unocss'

INFO

आप अपने मौजूदा UI फ्रेमवर्क्स के पूरक के रूप में भी इस प्रीसेट का उपयोग कर सकते हैं ताकि pure CSS आइकन हों!

यदि आप एक बार में Iconify पर उपलब्ध सभी आइकन सेट इंस्टॉल करना पसंद करते हैं (~130MB):

pnpmyarnnpmbun

bash

pnpm add -D @iconify/json

bash

yarn add -D @iconify/json

bash

npm install -D @iconify/json

bash

bun add -D @iconify/json

अतिरिक्त गुण

आप आइकनों के डिफ़ॉल्ट व्यवहार को नियंत्रित करने के लिए अतिरिक्त CSS गुण प्रदान कर सकते हैं। निम्न डिफ़ॉल्ट रूप से आइकनों को इनलाइन बनाने का एक उदाहरण है:

presetIcons({
  extraProperties: {
    'display': 'inline-block',
    'vertical-align': 'middle',
    // ...
  },
})

मोड ओवरराइडिंग

डिफ़ॉल्ट रूप से, यह प्रीसेट आइकनों की विशेषताओं के आधार पर प्रत्येक आइकन के लिए रेंडरिंग मोड स्वचालित रूप से चुनेगा। आप इस ब्लॉग पोस्ट में और पढ़ सकते हैं। कुछ मामलों में, आप प्रत्येक आइकन के लिए रेंडरिंग मोड स्पष्ट रूप से सेट करना चा सकते हैं।

?bg background-img के लिए - आइकन को बैकग्राउंड इमेज के रूप में रेंडर करता है
?mask mask के लिए - आइकन को मास्क इमेज के रूप में रेंडर करता है

उदाहरण के लिए, vscode-icons:file-type-light-pnpm, रंगों वाला एक आइकन (svg में currentColor नहीं होता है) जो बैकग्राउंड इमेज के रूप में रेंडर किया जाएगा। इसे मास्क इमेज के रूप में रेंडर करने और उसके रंगों को बाईपास करने के लिए vscode-icons:file-type-light-pnpm?mask का उपयोग करें।

html

<div class="w-full flex items-center justify-center gap-x-4 text-4xl p-2 mt-4">
  <div class="i-vscode-icons:file-type-light-pnpm" />
  <div class="i-vscode-icons:file-type-light-pnpm?mask text-red-300" />
</div>

संग्रह और आइकन रिज़ॉल्वर कॉन्फ़िगर करना

आप @iconify-json/[the-collection-you-want], @iconify/json के माध्यम से संग्रह प्रदान कर सकते हैं या अपने UnoCSS कॉन्फ़िगरेशन पर collections विकल्प का उपयोग करके अपने कस्टम का उपयोग कर सकते हैं।

ब्राउज़र

iconify संग्रह लोड करने के लिए आपको @iconify-json/[the-collection-you-want] का उपयोग करना चाहिए, @iconify/json नहीं, क्योंकि json फ़ाइल बहुत बड़ी है।

बंडलर

बंडलर्स का उपयोग करते समय, आप dynamic imports का उपयोग करके संग्रह प्रदान कर सकते हैं ताकि वे async chunk के रूप में बंडल हों और ऑन-डिमांड लोड हों।

import presetIcons from '@unocss/preset-icons/browser'

export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
        mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
        logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
      }
    })
  ]
})

CDN

या यदि आप उन्हें CDN से प्राप्त करना पसंद करते हैं, तो आप v0.32.10 से cdn विकल्प निर्दिष्ट कर सकते हैं। हम CDN प्रदाता के रूप में esm.sh की अनुशंसा करते हैं।

presetIcons({
  cdn: 'https://esm.sh/'
})

कस्टमाइज़ेशन

आप CustomIconLoader या InlineCollection का उपयोग करके अपने स्वयं के कस्टम संग्रह भी प्रदान कर सकते हैं, उदाहरण के लिए InlineCollection का उपयोग करके:

presetIcons({
  collections: {
    custom: {
      circle: '<svg viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>',
      /* ... */
    },
    carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default as any),
    /* ... */
  }
})

और फिर, आप इसे अपने html पर उपयोग कर सकते हैं: <span class="i-custom:circle"></span>

Node.js

Node.js में प्रीसेट स्वचालित रूप से इंस्टॉल किए गए iconify डेटासेट को खोजेगा, इसलिए आपको iconify संग्रह पंजीकृत करने की आवश्यकता नहीं है।

आप CustomIconLoader या InlineCollection का उपयोग करके अपने स्वयं के कस्टम संग्रह भी प्रदान कर सकते हैं।

FileSystemIconLoader

इसके अतिरिक्त, आप अपने फ़ाइल सिस्टम से अपने कस्टम आइकन लोड करने के लिए FileSystemIconLoader का उपयोग कर सकते हैं। आपको @iconify/utils पैकेज को dev dependency के रूप में इंस्टॉल करने की आवश्यकता होगी।

import fs from 'node:fs/promises'
// लोडर हेल्पर्स
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import { defineConfig, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        // संग्रह नाम के रूप में कुंजी
        'my-icons': {
          account: '<svg><!-- ... --></svg>',
          // अपने कस्टम आइकन को आलस्यपूर्वक लोड करें
          settings: () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
          /* ... */
        },
        'my-other-icons': async (iconName) => {
          // आपका कस्टम लोडर यहाँ। जो चाहो कर सकते हो।
          // उदाहरण के लिए, दूरस्थ सर्वर से fetch करें:
          return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
        },
        // फ़ाइल सिस्टम से आइकन लोड करने के लिए एक हेल्पर
        // `./assets/icons` के अंतर्गत `.svg` एक्सटेंशन वाली फ़ाइलें उसके फ़ाइल नाम के रूप में लोड की जाएंगी
        // आप प्रत्येक आइकन को बदलने के लिए एक ट्रांसफॉर्म कॉलबैक भी प्रदान कर सकते हैं (वैकल्पिक)
        'my-yet-other-icons': FileSystemIconLoader(
          './assets/icons',
          svg => svg.replace(/#fff/, 'currentColor')
        )
      }
    })
  ]
})

ExternalPackageIconLoader

@iconify/utils v2.1.20 से आप नए createExternalPackageIconLoader हेल्पर का उपयोग करके अन्य लेखकों के आइकन लोड करने के लिए अन्य पैकेजों का उपयोग कर सकते हैं।

WARNING

बाहरी पैकेजों में IconifyJSON प्रारूप में icons डेटा वाली icons.json फ़ाइल शामिल होनी चाहिए, जिसे Iconify Tools के साथ निर्यात किया जा सकता है। अधिक विवरण के लिए JSON पैकेज के रूप में आइकन सेट निर्यात करना देखें।

उदाहरण के लिए, आप अपने कस्टम या तीसरे पक्ष के आइकन लोड करने के लिए an-awesome-collection या @my-awesome-collections/some-collection का उपयोग कर सकते हैं:

import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
import { defineConfig, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      collections: createExternalPackageIconLoader('an-awesome-collection')
    })
  ]
})

आप इसे अन्य कस्टम आइकन लोडर्स के साथ भी जोड़ सकते हैं, उदाहरण के लिए:

import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
import { defineConfig, presetIcons } from 'unocss'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        ...createExternalPackageIconLoader('other-awesome-collection'),
        ...createExternalPackageIconLoader('@my-awesome-collections/some-collection'),
        ...createExternalPackageIconLoader('@my-awesome-collections/some-other-collection'),
        'my-yet-other-icons': FileSystemIconLoader(
          './assets/icons',
          svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
        )
      }
    })
  ]
})

आइकन कस्टमाइज़ेशन

आप customizations कॉन्फ़िगरेशन विकल्प का उपयोग करके सभी आइकनों को कस्टमाइज़ कर सकते हैं।

उपलब्ध कस्टमाइज़ेशन फ़ंक्शन:

transform: कच्चा svg ट्रांसफॉर्म करें, केवल तब लागू होगा जब custom आइकन संग्रह का उपयोग किया जाएगा (iconify संग्रहों को बाहर रखा गया)।
customize: डिफ़ॉल्ट आइकन कस्टमाइज़ेशन मान बदलें।
iconCustomizer: डिफ़ॉल्ट आइकन कस्टमाइज़ेशन मान बदलें।

प्रत्येक लोड किए गए आइकन के लिए, कस्टमाइज़ेशन इस क्रम में लागू किए जाएंगे:

यदि प्रदान किया गया है और कस्टम आइकन संग्रह का उपयोग किया जा रहा है तो कच्चे svg पर transform लागू करें
यदि प्रदान किया गया है तो डिफ़ॉल्ट कस्टमाइज़ेशन के साथ customize लागू करें
यदि प्रदान किया गया है तो customize कस्टमाइज़ेशन के साथ iconCustomizer लागू करें

ग्लोबल कस्टम आइकन ट्रांसफॉर्मेशन

अपने कस्टम आइकन लोड करते समय, आप उन्हें ट्रांसफॉर्म कर सकते हैं, उदाहरण के लिए currentColor के साथ fill एट्रिब्यूट जोड़ें:

presetIcons({
  customizations: {
    transform(svg) {
      return svg.replace(/#fff/, 'currentColor')
    }
  }
})

संस्करण 0.30.8 से transform collection और icon नाम प्रदान करता है:

presetIcons({
  customizations: {
    transform(svg, collection, icon) {
      // इस संग्रह में इस आइकन पर fill लागू न करें
      if (collection === 'custom' && icon === 'my-icon')
        return svg
      return svg.replace(/#fff/, 'currentColor')
    }
  }
})

ग्लोबल आइकन कस्टमाइज़ेशन

कोई भी आइकन लोड करते समय आप सभी के लिए सामान्य गुणों को कस्टमाइज़ कर सकते हैं, उदाहरण के लिए समान आकार कॉन्फ़िगर करना:

presetIcons({
  customizations: {
    customize(props) {
      props.width = '2em'
      props.height = '2em'
      return props
    }
  }
})

आइकन/संग्रह कस्टमाइज़ेशन

आप iconCustomizer कॉन्फ़िगरेशन विकल्प का उपयोग करके प्रत्येक आइकन को कस्टमाइज़ कर सकते हैं।

iconCustomizer कॉन्फ़िगरेशन पर प्राथमिकता होगी।

iconCustomizer किसी भी संग्रह पर लागू किया जाएगा, यानी custom लोडर से प्रत्येक आइकन के लिए, custom collections पर inlined या @iconify से।

उदाहरण के लिए, आप किसी संग्रह के लिए सभी आइकनों या किसी संग्रह पर व्यक्तिगत आइकनों को बदलने के लिए iconCustomizer कॉन्फ़िगर कर सकते हैं:

presetIcons({
  customizations: {
    iconCustomizer(collection, icon, props) {
      // इस संग्रह में सभी आइकनों को कस्टमाइज़ करें
      if (collection === 'my-other-icons') {
        props.width = '4em'
        props.height = '4em'
      }
      // इस संग्रह में इस आइकन को कस्टमाइज़ करें
      if (collection === 'my-icons' && icon === 'account') {
        props.width = '6em'
        props.height = '6em'
      }
      // इस संग्रह में इस @iconify आइकन को कस्टमाइज़ करें
      if (collection === 'mdi' && icon === 'account') {
        props.width = '2em'
        props.height = '2em'
      }
    }
  }
})

निर्देश

आप आइकन के मेटाडेटा प्राप्त करने के लिए अपने CSS में icon() निर्देश का उपयोग कर सकते हैं।

css

.icon {
  background-image: icon('i-carbon-sun');
}

WARNING

icon() @unocss/preset-icons पर निर्भर है और कॉन्फ़िगरेशन का उपयोग करेगा, सुनिश्चित करें कि आपने यह प्रीसेट जोड़ा है।

icon() निर्देश के बारे में अधिक, निर्देश देखें।

विकल्प

scale

प्रकार: number
डिफ़ॉल्ट: 1

वर्तमान फ़ॉन्ट आकार (1em) से संबंधित स्केल।

mode

प्रकार: 'mask' | 'bg' | 'auto'
डिफ़ॉल्ट: 'auto'
देखें: https://antfu.me/posts/icons-in-pure-css

जेनरेट किए गए CSS आइकनों का मोड।

TIP

mask - मोनोक्रोम आइकनों के लिए बैकग्राउंड कलर और mask प्रॉपर्टी का उपयोग करें
bg - आइकनों के लिए बैकग्राउंड इमेज का उपयोग करें, रंग स्थिर हैं
auto - उसकी शैली के आधार पर प्रति आइकन mask और bg के बीच मोड स्मार्ट तरीके से तय करें

prefix

प्रकार: string | string[]
डिफ़ॉल्ट: 'i-'

आइकन नियमों से मेल खाने के लिए क्लास प्रीफ़िक्स।

extraProperties

प्रकार: Record<string, string>
डिफ़ॉल्ट: {}

जेनरेट किए गए CSS पर लागू अतिरिक्त CSS गुण।

warn

प्रकार: boolean
डिफ़ॉल्ट: false

गुम हुए आइकनों के मेल खाने पर चेतावनी जारी करें।

iconifyCollectionsNames

प्रकार: string[]
डिफ़ॉल्ट: undefined

उपयोग करने के लिए अतिरिक्त @iconify-json संग्रह। यह विकल्प तब उपयोग किया जाना चाहिए जब कोई नया @iconify-json संग्रह हो जो डिफ़ॉल्ट आइकन प्रीसेट संग्रह नामों में सूचीबद्ध नहीं है।

collections

प्रकार: Record<string, (() => Awaitable<IconifyJSON>) | undefined | CustomIconLoader | InlineCollection>
डिफ़ॉल्ट: undefined

Node.js वातावरण में, प्रीसेट स्वचालित रूप से इंस्टॉल किए गए iconify डेटासेट को खोजेगा। ब्राउज़र में उपयोग करते समय, यह विकल्प कस्टम लोडिंग तंत्र के साथ डेटासेट प्रदान करने के लिए प्रदान किया गया है।

layer

प्रकार: string
डिफ़ॉल्ट: 'icons'

नियम लेयर।

customizations

प्रकार: Omit<IconCustomizations, 'additionalProps' | 'trimCustomSvg'>
डिफ़ॉल्ट: undefined

कस्टम आइकन कस्टमाइज़ेशन।

autoInstall

प्रकार: boolean
डिफ़ॉल्ट: false

उपयोग का पता लगने पर आइकन स्रोत पैकेज स्वचालित रूप से इंस्टॉल करें।

WARNING

केवल node वातावरण पर, browser पर यह विकल्प अनदेखा किया जाएगा।

unit

प्रकार: string
डिफ़ॉल्ट: 'em'

कस्टम आइकन इकाई।

cdn

प्रकार: string
डिफ़ॉल्ट: undefined

CDN से आइकन लोड करें। https:// से शुरू होना चाहिए और / से समाप्त होना चाहिए।

अनुशंसित:

https://esm.sh/
https://cdn.skypack.dev/

customFetch

प्रकार: (url: string) => Promise<any>
डिफ़ॉल्ट: undefined

प्रीसेट ने डिफ़ॉल्ट फ़ेचर के रूप में ofetch का उपयोग किया है, आप आइकन डेटा प्रदान करने के लिए कस्टम फ़ेच फ़ंक्शन भी कर सकते हैं।

processor

प्रकार: (cssObject: CSSObject, meta: Required<IconMeta>) => void
डिफ़ॉल्ट: undefined

interface IconMeta {
  collection: string
  icon: string
  svg: string
  mode?: IconsOptions['mode']
}

स्ट्रिंगिफाई करने से पहले CSS ऑब्जेक्ट के लिए प्रोसेसर। उदाहरण देखें।

उन्नत कस्टम आइकन सेट क्लीनअप

जब अपने कस्टम आइकनों के साथ इस प्रीसेट का उपयोग करते हैं, तो किसी भी आइकन सेट के लिए Iconify द्वारा की गई क्लीनअप प्रक्रिया के समान क्लीनअप प्रक्रिया का उपयोग करने पर विचार करें। आपको आवश्यक सभी टूल Iconify Tools में उपलब्ध हैं।

आप Vue 3 प्रोजेक्ट पर इस प्रीसेट का उपयोग करते हुए इस रेपो की जांच कर सकते हैं: @iconify/tools/@iconify-demo/unocss।

अधिक विवरण के लिए Iconify का आइकनों की सफाई करना लेख पढ़ें।

पहुँच योग्यता संबंधी चिंताएँ

आइकनों का उपयोग करते समय, अपने सभी संभावित उपयोगकर्ताओं को ध्यान में रखना महत्वपूर्ण है। उनमें से कुछ स्क्रीन रीडर का उपयोग कर रहे होंगे, और उन्हें यह समझने के लिए एक वैकल्पिक पाठ की आवश्यकता होगी कि आइकन का क्या अर्थ है। आप आइकन का विवरण प्रदान करने के लिए aria-label एट्रिब्यूट का उपयोग कर सकते हैं:

html

<a href="/profile" aria-label="Profile" class="i-ph:user-duotone"></a>

यदि आइकन विशुद्ध रूप से सजावटी है और उसे एक पाठ विकल्प की आवश्यकता नहीं है, तो आप इसे स्क्रीन रीडर से छिपाने के लिए aria-hidden="true" का उपयोग कर सकते हैं:

html

<a href="/profile">
  <span aria-hidden="true" class="i-ph:user-duotone"></span>
  My Profile
</a>

स्क्रीन-रीडर्स के लिए संकेत पाठ प्रदान करने की कई अन्य तकनीकें हैं, उदाहरण के लिए, Wind3 प्रीसेट में तत्वों को दृश्य रूप से छिपाने लेकिन स्क्रीन रीडर के लिए सुलभ रखने के लिए sr-only शामिल है।

आप आइकन एक्सेसिबिलिटी के बारे में वेब पर कुछ अच्छे संसाधन पा सकते हैं, और CSS आइकन आइकन फ़ॉन्ट की तरह व्यवहार करते हैं, इसलिए आप वही तकनीकों का उपयोग कर सकते हैं जो आप आइकन फ़ॉन्ट के साथ करेंगे।

क्रेडिट

यह प्रीसेट @husayt द्वारा बनाए गए इस इश्यू से प्रेरित है।
@userquin द्वारा इस PR के कार्य पर आधारित।

Icons प्रीसेट ​

इंस्टॉल ​

अतिरिक्त गुण ​

मोड ओवरराइडिंग ​

संग्रह और आइकन रिज़ॉल्वर कॉन्फ़िगर करना ​

ब्राउज़र ​

बंडलर ​

CDN ​

कस्टमाइज़ेशन ​

Node.js ​

FileSystemIconLoader ​

ExternalPackageIconLoader ​

आइकन कस्टमाइज़ेशन ​

ग्लोबल कस्टम आइकन ट्रांसफॉर्मेशन ​

ग्लोबल आइकन कस्टमाइज़ेशन ​

आइकन/संग्रह कस्टमाइज़ेशन ​

निर्देश ​

विकल्प ​

scale ​

mode ​

prefix ​

extraProperties ​

warn ​

iconifyCollectionsNames ​

collections ​

layer ​

customizations ​

autoInstall ​

unit ​

cdn ​

customFetch ​

processor ​

उन्नत कस्टम आइकन सेट क्लीनअप ​

पहुँच योग्यता संबंधी चिंताएँ ​

क्रेडिट ​

Icons प्रीसेट

इंस्टॉल

अतिरिक्त गुण

मोड ओवरराइडिंग

संग्रह और आइकन रिज़ॉल्वर कॉन्फ़िगर करना

ब्राउज़र

बंडलर

CDN

कस्टमाइज़ेशन

Node.js

FileSystemIconLoader

ExternalPackageIconLoader

आइकन कस्टमाइज़ेशन

ग्लोबल कस्टम आइकन ट्रांसफॉर्मेशन

ग्लोबल आइकन कस्टमाइज़ेशन

आइकन/संग्रह कस्टमाइज़ेशन

निर्देश

विकल्प

scale

mode

prefix

extraProperties

warn

iconifyCollectionsNames

collections

layer

customizations

autoInstall

unit

cdn

customFetch

processor

उन्नत कस्टम आइकन सेट क्लीनअप

पहुँच योग्यता संबंधी चिंताएँ

क्रेडिट