组件库文档

icon图标

# 如何使用

使用 name="icon" 来声明图标，具体图标的名称请 copy 相应的标签

<jam-icon :font-size="32" color='red' name="jam-loading" />
<jam-icon :font-size="32" name="jam-arrow-down" />
<jam-icon :font-size="32" name="jam-arrow-alt" />
<jam-icon :font-size="32" name="jam-arrow-up" />
<jam-icon :font-size="32" name="jam-bell" />

Copy

# 图标合集

jam-loading
jam-loading-strange
jam-arrow-down
jam-arrow-alt
jam-arrow-up
jam-bell
jam-camera
jam-check
jam-check-circle
jam-close-circle
jam-close
jam-cloud-download
jam-cloud-upload
jam-copy
jam-double-arrow-left
jam-date
jam-double-arrow-right
jam-delete
jam-down
jam-down-circle
jam-download
jam-environment
jam-eye
jam-file-add
jam-file-excel
jam-file-jpg
jam-file-pdf
jam-filter
jam-folder
jam-file-text
jam-folder-add
jam-heart-off
jam-folder-open
jam-home
jam-inbox
jam-left
jam-information-circle
jam-laptop
jam-left-circle
jam-left-square
jam-login
jam-menu-fold
jam-menu-unfold
jam-mail
jam-map
jam-message
jam-minus-circle
jam-pause-circle
jam-link
jam-play-circle
jam-picture
jam-question-circle
jam-right
jam-safety
jam-reload
jam-poweroff
jam-plus-circle
jam-right-circle
jam-search
jam-shrink
jam-stop
jam-share
jam-swap
jam-tag
jam-time
jam-setting
jam-up
jam-unlock
jam-user
jam-up-circle
jam-upload
jam-verticle-right
jam-user-add
jam-usergroup-delete
jam-usergroup-add
jam-user-delete
jam-verification
jam-warning
jam-zoom-in
jam-wifi
jam-video-camera
jam-zoom-out

<ul class="icon-list">
  <li v-for="item in icons" :key="item">
    <span>
      <jam-icon :font-size="36" :name="item" />
      <span>{{ item }}</span>
    </span>
  </li>
</ul>
<script>
  export default {
    data(){
      return{
      icons: [
        "jam-loading",
        "jam-loading-strange",
        "jam-arrow-down",
        "jam-arrow-alt",
        "jam-arrow-up",
        "jam-bell",
        "jam-camera",
        "jam-check",
        "jam-check-circle",
        "jam-close-circle",
        "jam-close",
        "jam-cloud-download",
        "jam-cloud-upload",
        "jam-copy",
        "jam-double-arrow-left",
        "jam-date",
        "jam-double-arrow-right",
        "jam-delete",
        "jam-down",
        "jam-down-circle",
        "jam-download",
        "jam-environment",
        "jam-eye",
        "jam-file-add",
        "jam-file-excel",
        "jam-file-jpg",
        "jam-file-pdf",
        "jam-filter",
        "jam-folder",
        "jam-file-text",
        "jam-folder-add",
        "jam-heart-off",
        "jam-folder-open",
        "jam-home",
        "jam-inbox",
        "jam-left",
        "jam-information-circle",
        "jam-laptop",
        "jam-left-circle",
        "jam-left-square",
        "jam-login",
        "jam-menu-fold",
        "jam-menu-unfold",
        "jam-mail",
        "jam-map",
        "jam-message",
        "jam-minus-circle",
        "jam-pause-circle",
        "jam-link",
        "jam-play-circle",
        "jam-picture",
        "jam-question-circle",
        "jam-right",
        "jam-safety",
        "jam-reload",
        "jam-poweroff",
        "jam-plus-circle",
        "jam-right-circle",
        "jam-search",
        "jam-shrink",
        "jam-stop",
        "jam-share",
        "jam-swap",
        "jam-tag",
        "jam-time",
        "jam-setting",
        "jam-up",
        "jam-unlock",
        "jam-user",
        "jam-up-circle",
        "jam-upload",
        "jam-verticle-right",
        "jam-user-add",
        "jam-usergroup-delete",
        "jam-usergroup-add",
        "jam-user-delete",
        "jam-verification",
        "jam-warning",
        "jam-zoom-in",
        "jam-wifi",
        "jam-video-camera",
        "jam-zoom-out",
      ],
      }
    },
  };
</script>

Copy

# Attributes

参数	说明	类型	可选值	默认值
fontSize	图标大小	number		16
color	图标颜色	string	-	#606266
name	图标种类	string	-

← 安装 Button按钮→