preface

Recent study of Vue3 + TS treading pit diary

  • Vue3 v3.2.21
  • TypesSript v4.1.5
  • Element – Plus v1.1.0 – beta. 24

Differences in the way ICONS are used

Looking at the official elemental-Plus documentation, I found that the original font icon was moved to SVG, which changed the way it was used. You can see the difference between the two ways of using SVG. If you want to use SVG directly like use cases, you need to register the components globally.

The Element Plus team is currently migrating Font Icon from the original component to SVG Icon. Please pay attention to the update log to get the update information in time. Font Icon will be discarded in the first official release, please migrate as soon as possible.

  • Font Icon Usage
<template>
    <div>
        <i class="el-icon-edit"></i> 
    </div>
</template>
Copy the code
  • How to use SVG Icon
<template>
  <div>
    <el-icon :size="size" :color="color">
      <edit></edit>
    </el-icon>
    <! -- Or use it independently without derive attributes from parent -->
    <edit></edit>
  </div>
</template>
Copy the code

View the source code for a single SVG component

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
    <path
      d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
      stroke="currentColor"
      fill="none"
    />
    <path
      d="M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32zm0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32zM96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32zm576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32z"
      stroke="currentColor"
      fill="none"
    />
  </svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Aim',})</script>
Copy the code

Register the SVG Icon component

$yarn add @elemental-plus/ICONS # or $NPM install @elemental-plus/ICONSCopy the code

Create the register-icon.ts file

import { App } from 'vue'
// Import all icon Settings aliases
import * as ElIconModules from '@element-plus/icons'

// Import on demand
//import { Aim, Phone } from '@element-plus/icons'
//const ElIconModules = [Aim, Phone]

// Convert el-icon's component name AbbbCddd to i-ABbb-cDDD
// Switch is used as the component name
// For example, Switch is converted to I-switch, and ArrowDownBold is converted to I-arrow-down-bold
function _transElIconName(iconName: string) :string {
  return 'i' + iconName.replace(/[A-Z]/g.(match) = > The '-' + match.toLowerCase())
}
export function registerIcon(app: App) :void {
  for (const iconName in ElIconModules) {
    app.component(_transElIconName(iconName), ElIconModules[iconName])
  }
}
Copy the code

WARNING

Because the HTML standard already defines a tag called menu, you need to use an alias to render the icon if the menu you registered doesn’t work properly.