This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

background

If you would like to understand the principles of Unocss Icon, you can read the article about pure CSS ICONS

The text of this article is not high nutrition, can directly skip to – use part.

If your project already uses UNOCSS and has icon requirements, you can use unoCSS’s icon presets as a lightweight option for your project.

Maybe everyone used icon in alibaba vector icon library before the earliest, but when we added ICONS, we first chose to update its CSS, and then changed (::befor, ::after). This is cumbersome, but also adds a lot of limitations. Using this scheme means you need to have a deep understanding of how CSS works, but it’s also hard to create more complex ICONS (only three elements can be used).

Later, perhaps more commonly, icon libraries are referenced in projects and used as components

// import
import { Icon } from 'someIconsName'

// usage
<Icon />
Copy the code

It is also easy to use, and some icon libraries are loaded on demand. It’s also a good way to use it. Let’s take the naive- UI icon component as an example and see the result:

Essentially, ICONS are built in SVG format.

However, Unocss uses a pure CSS icon library. Let’s take a look at how to use it, and then explore the source code parsing process

use

install

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

If you go to NPM and look at the @iconify-JSON package, it has a lot of submodules under it that also publish packages. Which package we use is our corresponding collection name

For example, we install:

npm i -D @iconify-json/carbon
Copy the code

configuration

Back to our unocss.config.ts

import { presetIcons, defineConfig } from 'unocss'

export const createConfig = () => {
  return defineConfig({
    presets: [
      // ...
      presetIcons({
        collections: {
          carbon: () =>
            import('@iconify-json/carbon').then((i) => i.icons as any)
        }
      })
    ]
  })
}

export default createConfig()
Copy the code

We need to configure in presetIcons. Collections configures our installed Carbon icon library and dynamically imports json from the Carbon package (which stores the style of each icon)

Of course, the presetIcons configuration goes beyond collections,

export interface Options { scale? The default value is 1 mode? : 'mask' | 'background - img' | 'auto' default auto / / pattern prefix? : string // Use the prefix default 'I -' warn? : boolean collections? : Record<string, IconifyJSON | undefined | (() => Awaitable<IconifyJSON | undefined>)> extraProperties? : Record<string, string> // Core attributes, you can write additional CSS attributes to the icon component /** * Rule layer * @default 'ICONS' */ layer? : string }Copy the code

use

The above configuration is ready to use.

<div m2 f-c hover="op80">
  <a i-carbon-logo-github text-3xl text-white href="https://github.com/chris-zhu" target="_blank" />
  <div i-carbon:3d-cursor text-3xl text-white />
  <button text-white text-3xl class="i-carbon-sun" />
</div>
Copy the code