JpIconSelect 提供 svg 图片的加载和 iconfont 的加载

jp-svg-icon

加载项目中的 svg

<jp-svg-icon icon-class="phone" />

jp-icon-select

提供 3 种来源的图标，用于丰富菜单的图标配置

1、加载项目中的 svg，通过参数 svgs 传递给组件
2、组件内部支持 element 的图片和我们自己的图标库

选中图标

只展示： :onlyShow="true"

<template>
  <div>
    <jp-all-icon :iconName.sync="icon" @doClick="dialogVisible = true"></jp-all-icon>

    <jp-dialog title="选中图标" :visible.sync="dialogVisible" width="70%" append-to-body>
      <jp-icon-select :svgs="[]" @selected="doSelected"></jp-icon-select>
    </jp-dialog>

    <h3>只展示： :onlyShow="true"</h3>
    <jp-all-icon :onlyShow="true" :iconName.sync="icon"></jp-all-icon>
  </div>
</template>

<script>
export default {
  data() {
    return {
      icon: '',
      dialogVisible: false
    }
  },
  methods: {
    doSelected(e) {
      console.log(e)
      this.icon = e
      this.dialogVisible = false
    }
  }
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
svgs	项目中的 svg	Array	—	[]

jp-all-icon Attributes

参数	说明	类型	可选值	默认值
onlyShow	只展示图标	bool	—	false

jp-icon-select Methods

方法名	说明	事例
selected	选中的图标	-