element-plus/icon.md at c7e7224f77a4bef760dc1a9d4f1c4363042ba89b

mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 01:41:20 +08:00

feat(icon): introduce-el-icons-into-ep (#2766 )

- Add @element-plus/icons as dependency.
- Update el-icon.
- Update icon.md for all languages.

2021-07-30 11:29:25 +08:00

4.1 KiB

Raw Blame History

Icônes

Element Plus fournit un ensemble d'icônes basiques.

:::warning Element Plus team is replacing all Font Icon in the previously built components to SVG Icon, please keep you eyes on ChangeLog, for getting latest updates, Font Icon will be deprecated after the first stable release. :::

SVG Icon Usage

If you want to use directly like the example, you need to globally register the components before using it.
If you want to see all available SVG icons please check @element-plus/icons and the source Github/ElementPlus/icons out or SVG icons

Installation

The current icon is only targeted to Vue3.

Using yarn

$ yarn add @element-plus/icons

Using npm

$ npm install @element-plus/icons

Simple usage

<!-- Use el-icon to provide attributes to SVG icon -->
<el-icon :size="size" :color="color">
  <edit />
</el-icon>
<!-- Or use it independently without derive attributes from parent -->
<edit />

<script lang="ts">
import { Edit } from '@element-plus/icons'

export default defineComponent({
  components: {
    // Full name
    [Edit.name]: Edit,
    // or Shorthanded,
    Edit,
  },
})
</script>

Combined with `el-icon`

:::demo el-icon provides extra attributes for raw SVG icon, for more detail, please read to the end.

  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
  </p>
  <el-icon :size="20">
    <edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit">
    <share />
  </el-icon>
  <el-icon>
    <delete />
  </el-icon>
  <el-icon class="is-loading">
    <loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;">
      Search
    </span>
  </el-button>

:::

Using SVG icônes directly

:::demo

  <div style="font-size: 20px;">
    <!-- Since svg icons do not carry any attributes by default -->
    <!-- You need to provide attributes directly -->
    <edit style="width: 1em; height: 1em; margin-right: 8px;" />
    <share style="width: 1em; height: 1em; margin-right: 8px;" />
    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
    <search style="width: 1em; height: 1em; margin-right: 8px;" />
  </div>

:::

SVG icônes collection

:::tip This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use el-icon to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains

You can use SVG icon in any version as long as you install it

You can click the icon to copy it :::

{{component}}

Font Icônes Basic usage

Just assign the class name to el-icon-iconName.