Icons preset

UnoCSS-এর জন্য Pure CSS-যেকোনো icon ব্যবহার করুন।

TIP

প্রস্তাবিত পড়া: Pure CSS-এ Icons

নিমের conventions অনুসরণ করে icons ব্যবহার করুন

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

উদাহরণস্বরূপ:

html

<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i-mdi-alarm text-orange-400" />
<!-- A large Vue logo -->
<div class="i-logos-vue text-3xl" />
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Twemoji of laugh, turns to tear on hovering -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

Hover it

সমস্ত উপলব্ধ icons দেখুন।

ইনস্টলেশন

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]

আমরা icons-এর data source হিসাবে Iconify ব্যবহার করি। আপনাকে @iconify-json/* pattern অনুসরণ করে devDependencies-এ corresponding icon-set install করতে হবে। উদাহরণস্বরূপ, Material Design Icons-এর জন্য @iconify-json/mdi, Tabler-এর জন্য @iconify-json/tabler। আপনি সমস্ত উপলব্ধ collections-এর জন্য Icônes বা Iconify দেখতে পারেন।

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

export default defineConfig({
  presets: [
    presetIcons({ /* options */ }),
    // ...other presets
  ],
})

TIP

এই preset unocss প্যাকেজে অন্তর্ভুক্ত, আপনি সেখান থেকেও import করতে পারেন:

import { presetIcons } from 'unocss'

INFO

আপনি এই preset-কে আপনার বিদ্যমান UI frameworks-এর complement হিসাবেও alone ব্যবহার করতে পারেন pure CSS icons পেতে!

আপনি যদি Iconify-এ উপলব্ধ সমস্ত icon sets একসাথে install করতে চান (~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

অতিরিক্ত Properties

আপনি icons-এর ডিফল্ট আচরণ নিয়ন্ত্রণ করতে অতিরিক্ত CSS properties প্রদান করতে পারেন। নিম্নলিখিত icons ডিফল্টভাবে inlined করার একটি উদাহরণ:

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

Modes Overriding

ডিফল্টভাবে, এই preset icons-এর characteristics-এর ভিত্তিতে প্রতিটি icon-এর জন্য rendering modes স্বয়ংক্রিয়ভাবে বেছে নেবে। আপনি এই blog post-এ আরও পড়তে পারবেন। কিছু ক্ষেত্রে, আপনি প্রতিটি icon-এর জন্য rendering modes স্পষ্টভাবে সেট করতে চাইতে পারেন।

?bg background-img-এর জন্য - icon-কে background image হিসাবে render করে
?mask mask-এর জন্য - icon-কে mask image হিসাবে render করে

উদাহরণস্বরূপ, vscode-icons:file-type-light-pnpm, colors সহ একটি icon (the svg doesn't contain currentColor) যা একটি background image হিসাবে render হবে। এটিকে mask image হিসাবে render করতে এবং এর colors bypass করতে 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>

collections এবং icons resolvers কনফিগার করা

আপনি আপনার UnoCSS configuration-এ collections option ব্যবহার করে @iconify-json/[the-collection-you-want], @iconify/json বা আপনার custom ones প্রদান করতে পারেন।

Browser

iconify collections লোড করতে আপনার @iconify/json না ব্যবহার করা উচিত কারণ json ফাইলটি huge।

Bundler

bundlers ব্যবহার করার সময়, আপনি dynamic imports ব্যবহার করে collections প্রদান করতে পারেন যাতে তারা async chunk হিসাবে bundler হবে এবং on demand লোড হবে।

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 থেকে fetch করতে পছন্দ করেন, আপনি v0.32.10 থেকে cdn option নির্দিষ্ট করতে পারেন। আমরা CDN provider হিসাবে esm.sh সুপারিশ করি।

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

Customization

আপনি CustomIconLoader বা InlineCollection ব্যবহার করে আপনার নিজের custom collections প্রদান করতে পারেন, উদাহরণস্বরূপ 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-এ preset স্বয়ংক্রিয়ভাবে installed iconify dataset খুঁজবে, তাই আপনাকে iconify collections register করতে হবে না।

আপনি CustomIconLoader বা InlineCollection ব্যবহার করে আপনার নিজের custom collections প্রদান করতে পারেন।

FileSystemIconLoader

অতিরিক্তভাবে, আপনি আপনার file system থেকে আপনার custom icons লোড করতে FileSystemIconLoader ব্যবহার করতে পারেন। আপনাকে @iconify/utils package dev dependency হিসাবে install করতে হবে।

import fs from 'node:fs/promises'
// loader helpers
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import { defineConfig, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      collections: {
        // key as the collection name
        'my-icons': {
          account: '<svg><!-- ... --></svg>',
          // load your custom icon lazily
          settings: () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
          /* ... */
        },
        'my-other-icons': async (iconName) => {
          // your custom loader here. Do whatever you want.
          // for example, fetch from a remote server:
          return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
        },
        // a helper to load icons from the file system
        // files under `./assets/icons` with `.svg` extension will be loaded as it's file name
        // you can also provide a transform callback to change each icon (optional)
        'my-yet-other-icons': FileSystemIconLoader(
          './assets/icons',
          svg => svg.replace(/#fff/, 'currentColor')
        )
      }
    })
  ]
})

ExternalPackageIconLoader

@iconify/utils v2.1.20 থেকে আপনি নতুন createExternalPackageIconLoader helper ব্যবহার করে অন্যান্য authors-এর packages থেকে icons লোড করতে পারেন।

WARNING

External packages-এ অবশ্যই IconifyJSON format-এ icons data সহ icons.json file অন্তর্ভুক্ত থাকতে হবে, যা Iconify Tools দিয়ে export করা যায়। আরও বিস্তারিত জানার জন্য Exporting icon set as JSON package দেখুন।

উদাহরণস্বরূপ, আপনি আপনার custom বা third party icons লোড করতে 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')
    })
  ]
})

আপনি এটি অন্যান্য custom icon loaders-এর সাথে একত্রিত করতে পারেন, উদাহরণস্বরূপ:

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" ')
        )
      }
    })
  ]
})

Icon Customizations

আপনি customizations configuration option ব্যবহার করে সমস্ত icons customize করতে পারেন।

উপলব্ধ customizations functions:

transform: raw svg transform করে, শুধুমাত্র custom icon collection ব্যবহার করার সময় apply হবে (iconify collections excluded)।
customize: default icon customizations values পরিবর্তন করে।
iconCustomizer: default icon customizations values পরিবর্তন করে।

প্রতিটি loaded icon-এর জন্য, customizations এই ক্রমে apply হবে:

raw svg-তে transform apply করুন, যদি প্রদান করা হয় এবং custom icon collection ব্যবহার করা হয়
default customizations দিয়ে customize apply করুন, যদি প্রদান করা হয়
customize customizations দিয়ে iconCustomizer apply করুন, যদি প্রদান করা হয়

Global Custom Icon Transformation

আপনার custom icons লোড করার সময়, আপনি সেগুলি transform করতে পারেন, উদাহরণস্বরূপ fill attribute currentColor দিয়ে যোগ করা:

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

সংস্করণ 0.30.8 থেকে transform collection এবং icon names প্রদান করে:

presetIcons({
  customizations: {
    transform(svg, collection, icon) {
      // do not apply fill to this icons on this collection
      if (collection === 'custom' && icon === 'my-icon')
        return svg
      return svg.replace(/#fff/, 'currentColor')
    }
  }
})

Global Icon Customization

যেকোনো icon লোড করার সময় আপনি সেগুলির সাধারণ properties customize করতে পারেন, উদাহরণস্বরূপ একই size কনফিগার করা:

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

Icon/Collection Customization

আপনি iconCustomizer configuration option ব্যবহার করে প্রতিটি icon customize করতে পারেন।

iconCustomizer configuration-এর উপর অগ্রাধিকার পাবে।

iconCustomizer যেকোনো collection-এ apply হবে, অর্থাৎ, custom loader থেকে প্রতিটি icon-এর জন্য, custom collections-এ inlined বা @iconify থেকে।

উদাহরণস্বরূপ, আপনি একটি collection-এর জন্য সমস্ত icons বা একটি collection-এ individual icons পরিবর্তন করতে iconCustomizer কনফিগার করতে পারেন:

presetIcons({
  customizations: {
    iconCustomizer(collection, icon, props) {
      // customize all icons in this collection
      if (collection === 'my-other-icons') {
        props.width = '4em'
        props.height = '4em'
      }
      // customize this icon in this collection
      if (collection === 'my-icons' && icon === 'account') {
        props.width = '6em'
        props.height = '6em'
      }
      // customize this @iconify icon in this collection
      if (collection === 'mdi' && icon === 'account') {
        props.width = '2em'
        props.height = '2em'
      }
    }
  }
})

Directives

আপনি CSS-এ icon-এর metadata পেতে icon() directive ব্যবহার করতে পারেন।

css

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

WARNING

icon() @unocss/preset-icons-এর উপর নির্ভর করে এবং configuration ব্যবহার করবে, নিশ্চিত করুন যে আপনি এই preset যোগ করেছেন।

icon() directive সম্পর্কে আরও জানতে, Directives দেখুন।

অপশন

scale

Type: number
Default: 1

বর্তমান font size (1em)-এর সাথে সম্পর্কিত scale।

mode

Type: 'mask' | 'bg' | 'auto'
Default: 'auto'
See: https://antfu.me/posts/icons-in-pure-css

Generated CSS icons-এর mode।

TIP

mask - monochrome icons-এর জন্য background color এবং mask property ব্যবহার করুন
bg - icons-এর জন্য background image ব্যবহার করুন, colors static
auto - এর style-এর ভিত্তিতে icon অনুযায়ী mask এবং bg-এর মধ্যে smartly decide করুন

prefix

Type: string | string[]
Default: 'i-'

Icon rules match করার জন্য Class prefix।

extraProperties

Type: Record<string, string>
Default: {}

Generated CSS-এ apply হওয়া অতিরিক্ত CSS properties।

warn

Type: boolean
Default: false

Missing icons match হলে warning emit করুন।

iconifyCollectionsNames

Type: string[]
Default: undefined

ব্যবহার করার জন্য অতিরিক্ত @iconify-json collections। এই option তখনই ব্যবহার করা উচিত যখন default icons preset collection names-এ তালিকাভুক্ত নেই এমন নতুন @iconify-json collections আছে।

collections

Type: Record<string, (() => Awaitable<IconifyJSON>) | undefined | CustomIconLoader | InlineCollection>
Default: undefined

Node.js environment-এ, preset স্বয়ংক্রিয়ভাবে installed iconify dataset খুঁজবে। Browser-এ ব্যবহার করার সময়, এই options custom loading mechanism দিয়ে dataset প্রদান করার জন্য প্রদান করা হয়।

layer

Type: string
Default: 'icons'

Rule layer।

customizations

Type: Omit<IconCustomizations, 'additionalProps' | 'trimCustomSvg'>
Default: undefined

Custom icon customizations।

autoInstall

Type: boolean
Default: false

Usage detect হলে icon sources package auto install করুন।

WARNING

শুধুমাত্র node environment-এ, browser-এ এই option উপেক্ষা করা হবে।

unit

Type: string
Default: 'em'

Custom icon unit।

cdn

Type: string
Default: undefined

CDN থেকে icons লোড করুন। https:// দিয়ে শুরু এবং / দিয়ে শেষ হওয়া উচিত।

সুপারিশ:

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

customFetch

Type: (url: string) => Promise<any>
Default: undefined

Preset ডিফল্ট fetcher হিসাবে ofetch ব্যবহার করে, আপনি icon data প্রদান করতে custom fetch function ব্যবহার করতে পারেন।

processor

Type: (cssObject: CSSObject, meta: Required<IconMeta>) => void
Default: undefined

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

Stringify করার আগে CSS object-এর জন্য processor। example দেখুন।

Advanced Custom Icon Set Cleanup

আপনার custom icons-এর সাথে এই preset ব্যবহার করার সময়, Iconify-এর মতো যেকোনো icons sets-এর জন্য cleanup process ব্যবহার করা বিবেচনা করুন। আপনার প্রয়োজনীয় সমস্ত tools Iconify Tools-এ উপলব্ধ।

আপনি এই repo চেক করতে পারেন, এই preset ব্যবহার করে একটি Vue 3 প্রজেক্টে: @iconify/tools/@iconify-demo/unocss।

আরও বিস্তারিত জানার জন্য Iconify-এর Cleaning up icons article পড়ুন।

Accessibility Concerns

Icons ব্যবহার করার সময়, আপনার সমস্ত সম্ভাব্য users-কে মাথায় রাখা গুরুত্বপূর্ণ। তাদের মধ্যে কিছু screen readers ব্যবহার করতে পারে, এবং তাদের একটি icon বোঝার জন্য alternative text প্রয়োজন হবে। আপনি icon-এর বর্ণনা প্রদান করতে aria-label attribute ব্যবহার করতে পারেন:

html

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

যদি icon সম্পূর্ণরূপে decorative হয় এবং text alternative প্রয়োজন না হয়, আপনি screen readers থেকে এটি লুকাতে aria-hidden="true" ব্যবহার করতে পারেন:

html

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

Screen-readers-এর জন্য hint text প্রদান করার আরও অনেক কৌশল আছে, উদাহরণস্বরূপ, Wind3 preset-এ sr-only আছে যা elements visually hide করে কিন্তু screen readers-এর জন্য accessible রাখে।

আপনি ওয়েবে icons accessibility সম্পর্কে কিছু ভালো resources খুঁজে পেতে পারেন, এবং CSS icons icon fonts-এর মতো আচরণ করে, তাই আপনি icon fonts-এর সাথে যে কৌশল ব্যবহার করতে পারেন সেই একই কৌশল ব্যবহার করতে পারেন।

Credits

এই preset @husayt দ্বারা তৈরি এই issue থেকে অনুপ্রেরণা নিয়ে তৈরি।
@userquin দ্বারা এই PR-এর কাজের উপর ভিত্তি করে।

Icons preset ​

ইনস্টলেশন ​

অতিরিক্ত Properties ​

Modes Overriding ​

collections এবং icons resolvers কনফিগার করা ​

Browser ​

Bundler ​

CDN ​

Customization ​

Node.js ​

FileSystemIconLoader ​

ExternalPackageIconLoader ​

Icon Customizations ​

Global Custom Icon Transformation ​

Global Icon Customization ​

Icon/Collection Customization ​

Directives ​

অপশন ​

scale ​

mode ​

prefix ​

extraProperties ​

warn ​

iconifyCollectionsNames ​

collections ​

layer ​

customizations ​

autoInstall ​

unit ​

cdn ​

customFetch ​

processor ​

Advanced Custom Icon Set Cleanup ​

Accessibility Concerns ​

Credits ​

Icons preset

ইনস্টলেশন

অতিরিক্ত Properties

Modes Overriding

collections এবং icons resolvers কনফিগার করা

Browser

Bundler

CDN

Customization

Node.js

FileSystemIconLoader

ExternalPackageIconLoader

Icon Customizations

Global Custom Icon Transformation

Global Icon Customization

Icon/Collection Customization

Directives

অপশন

scale

mode

prefix

extraProperties

warn

iconifyCollectionsNames

collections

layer

customizations

autoInstall

unit

cdn

customFetch

processor

Advanced Custom Icon Set Cleanup

Accessibility Concerns

Credits