There are many ways to use icon in the project. For example, Alibaba’s IconFont is very suitable for team development, so today we will talk about another method, Iconify.

introduce

Iconify is the most versatile icon framework.

  • A unified icon framework that can be used with any icon library.
  • Includes more than 100 icon sets out of the box, containing more than 100,000 ICONS.
  • Embed ICONS in HTML using components of an SVG framework or front-end framework.
  • Embed ICONS in your design using Figma, Sketch, and Adobe XD plug-ins.
  • Use Iconify Icon Finder to add Icon search to your application.

Finally, we attach the official website address, where you can view all ICONS in the Icon library

The installation

The Iconify SVG framework is designed to be as easy to use as possible. You can

<script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
//or
<script src="https://cdn.jsdelivr.net/npm/@iconify/[email protected]/dist/iconify.min.js"></script>
Copy the code

If you’re building your project using a packaging tool like WebPack, Vite, rollup, etc., you can

For use in Vite:

1. Install dependencies

yarn add @iconify/iconify --save
yarn add vite-plugin-purge-icons @iconify/json -D
Copy the code

2. Configure the vite. Config. js file

// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons'

export default {
  plugins: [
    PurgeIcons({
      /* PurgeIcons Options */}})]Copy the code

How to use

You can use this in projects, where data-icon sets the name of the icon

<span class="iconify" data-icon="eva:people-outline"> </span>
Copy the code

Packaging components

We definitely can’t use it directly in a project, it’s usually packaged as a generic component. Below is a global component encapsulated in my project for your reference only.

// Icon.vue
<template>
  <div>
    <span ref="elRef" :class="[$attrs.class, 'anticon']" :style="getWrapStyle"></span>
  </div>
</template>
<script lang="ts" setup>
interface Props {
  icon: string; / / the name of the iconsize? : number;// Font sizecolor? : string;// Font color
}
import { renderSVG } from "@iconify/iconify";
import { onMounted, ref, unref, nextTick, computed, CSSProperties } from "vue";
const props = withDefaults(defineProps<Props>(), {
  size: 16.color: "white"
});

const elRef = ref<Element>();
const getWrapStyle = computed((): CSSProperties= > {
  return {
    color: props.color,
    fontSize: `${props.size}px`.display: "inline-flex"
  };
});

const update = async() = > {const el = unref(elRef);
  if(! el)return;
  await nextTick();
  const svg = renderSVG(props.icon);
  if(! svg) {const span = document.createElement("span");
    span.className = "iconify";
    span.dataset.icon = props.icon;
    el.textContent = "";
    el.appendChild(span);
  } else {
    el.textContent = ""; el.appendChild(svg); }}; onMounted(() = > {
  update();
});
</script>
<style lang="scss" scoped></style>

Copy the code

Using the component

<template>
    <Icon :icon="mdi:content-copy"></Icon>
</template>
Copy the code