SvgSprites 矢量图标

SvgSprites 矢量图标

使用说明 JS

svgSprites是将多个svg图放置在一个文件中,页面通过use的方式调用svg图。svg是矢量图,不管多大或者多小都不会失真或者产生锯齿,弥补了png图和iconfont的缺陷,svgSprites将是未来网页用图的趋势。如果使用大型单色图标,推荐使用iconfont,但是iconfont在小于18px下锯齿很严重,所以在使用小图标的时候建议使用svgsprites。

本框架已经将ax-iconfont图标库制作成了svgSprits,使用很简单,引入svgSprites.js,在页面中按id引用即可。注意svg中的id即是iconfont中的样式名。样式名见:图标字体

                            <script src="src/js/svgSprites.js" type="text/javascript"></script>
                        
                            <svg class="ax-svg"><use xlink:href="#ID"/></svg>
                        

图标按钮

普通按钮

禁止的按钮

无边按钮

正文SVG

中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。

组合SVG

包含svg图标在内的不同类型的按钮可整齐排列在一起。

AX图标库

以下是AX图标库的svg格式,包含438个图标,不定时更新。对应查看iconfont图标库

箭头类

  • ax-icon-arrow-down-o
  • ax-icon-arrow-left-o
  • ax-icon-arrow-up-o
  • ax-icon-arrow-right-o
  • ax-icon-arrow-down-o-fill
  • ax-icon-arrow-left-o-fill
  • ax-icon-arrow-right-o-fill
  • ax-icon-arrow-up-o-fill
  • ax-icon-triangle-down
  • ax-icon-triangle-up
  • ax-icon-triangle-right
  • ax-icon-triangle-left
  • ax-icon-triangle-down-fill
  • ax-icon-triangle-left-fill
  • ax-icon-triangle-up-fill
  • ax-icon-triangle-right-fill
  • ax-icon-arrow-left-t
  • ax-icon-arrow-right-t
  • ax-icon-arrow-up-t
  • ax-icon-arrow-down-t
  • ax-icon-arrow-left
  • ax-icon-arrow-right
  • ax-icon-arrow-down
  • ax-icon-arrow-up
  • ax-icon-down-t
  • ax-icon-up-t
  • ax-icon-left-t
  • ax-icon-right-t
  • ax-icon-down
  • ax-icon-left
  • ax-icon-up
  • ax-icon-left
  • ax-icon-left-o
  • ax-icon-up-o
  • ax-icon-down-o
  • ax-icon-right-o
  • ax-icon-right-o-fill
  • ax-icon-down-o-fill
  • ax-icon-left-o-fill
  • ax-icon-up-o-fill
  • ax-icon-left-up
  • ax-icon-left-down
  • ax-icon-right-up
  • ax-icon-right-down
  • ax-icon-expand
  • ax-icon-collapse
  • ax-icon-corner-up-left
  • ax-icon-corner-left-down
  • ax-icon-corner-up-right
  • ax-icon-corner-right-up
  • ax-icon-corner-left-up
  • ax-icon-corner-left-up
  • ax-icon-corner-right-down
  • ax-icon-corner-down-right
  • ax-icon-down-double
  • ax-icon-left-double
  • ax-icon-right-double
  • ax-icon-up-double
  • ax-icon-dot-left
  • ax-icon-dot-right
  • ax-icon-pull-down
  • ax-icon-pull-up

表单类

  • ax-icon-check-t
  • ax-icon-check
  • ax-icon-check-o-t
  • ax-icon-check-o
  • ax-icon-check-s
  • ax-icon-check-o-fill
  • ax-icon-check-s-fill
  • ax-icon-check-s-gap
  • ax-icon-check-o-gap
  • ax-icon-radio
  • ax-icon-radio-fill
  • ax-icon-circle
  • ax-icon-close-t
  • ax-icon-close
  • ax-icon-close-o-t
  • ax-icon-close-o
  • ax-icon-close-s
  • ax-icon-close-o-fill
  • ax-icon-close-s-fill
  • ax-icon-backspace
  • ax-icon-backspace-fill
  • ax-icon-plus-t
  • ax-icon-plus
  • ax-icon-plus-s
  • ax-icon-plus-o
  • ax-icon-plus-o-fill
  • ax-icon-plus-s-fill
  • ax-icon-minus-t
  • ax-icon-minus
  • ax-icon-minus-s
  • ax-icon-minus-o
  • ax-icon-minus-o-fill
  • ax-icon-minus-s-fill
  • ax-icon-warning-o-t
  • ax-icon-warning-o
  • ax-icon-warning-o-fill
  • ax-icon-info-o-t
  • ax-icon-info-o
  • ax-icon-info-o-fill
  • ax-icon-question
  • ax-icon-question-o-t
  • ax-icon-question-o
  • ax-icon-question-o-fill
  • ax-icon-slash
  • ax-icon-slash-fill
  • ax-icon-slash-h
  • ax-icon-slash-h-fill
  • ax-icon-sync
  • ax-icon-refresh
  • ax-icon-loader
  • ax-icon-select
  • ax-icon-addpic
  • ax-icon-earth
  • ax-icon-earth-fill
  • ax-icon-edit
  • ax-icon-edit-fill
  • ax-icon-edit
  • ax-icon-edit-fill
  • ax-icon-heart
  • ax-icon-heart-fill
  • ax-icon-eye
  • ax-icon-eye-fill
  • ax-icon-eye-off
  • ax-icon-eye-off-fill
  • ax-icon-eye-off-alt
  • ax-icon-trash
  • ax-icon-trash-fill
  • ax-icon-trash-alt
  • ax-icon-trash-alt-fill
  • ax-icon-lock
  • ax-icon-lock-fill
  • ax-icon-unlock
  • ax-icon-unlock-fill
  • ax-icon-toggle-left
  • ax-icon-toggle-left-fill
  • ax-icon-toggle-right
  • ax-icon-toggle-right-fill

菜单导航类

  • ax-icon-options
  • ax-icon-options-fill
  • ax-icon-options-v
  • ax-icon-options-v-fill
  • ax-icon-list
  • ax-icon-menu
  • ax-icon-more
  • ax-icon-more-v
  • ax-icon-menu-fold
  • ax-icon-menu-unfold
  • ax-icon-street
  • ax-icon-swap
  • ax-icon-sort
  • ax-icon-list-ol
  • ax-icon-sort-az-down
  • ax-icon-sort-az-up
  • ax-icon-sort-num-up
  • ax-icon-sort-num-down
  • ax-icon-sort-amount-up
  • ax-icon-sort-amount-down
  • ax-icon-widgets
  • ax-icon-widgets-fill
  • ax-icon-grid
  • ax-icon-grid-fill
  • ax-icon-totop
  • ax-icon-tobottom
  • ax-icon-home
  • ax-icon-home-fill
  • ax-icon-me
  • ax-icon-me-fill
  • ax-icon-paperplane
  • ax-icon-paperplane-fill
  • ax-icon-filter
  • ax-icon-filter-fill
  • ax-icon-nav
  • ax-icon-nav-fill
  • ax-icon-nav-v
  • ax-icon-nav-v-fill
  • ax-icon-map
  • ax-icon-map-fill
  • ax-icon-pin
  • ax-icon-pin-fill
  • ax-icon-undo
  • ax-icon-undo-fill
  • ax-icon-redo
  • ax-icon-redo-fill
  • ax-icon-badge-new
  • ax-icon-badge-vip
  • ax-icon-badge-hot

社交分享类

  • ax-icon-phone
  • ax-icon-phone-fill
  • ax-icon-phone-off
  • ax-icon-phone-off-fill
  • ax-icon-phone-missed
  • ax-icon-phone-missed-fill
  • ax-icon-phone-call
  • ax-icon-phone-call-fill
  • ax-icon-message-s
  • ax-icon-message-s-fill
  • ax-icon-message-o
  • ax-icon-message-o-fill
  • ax-icon-twitter
  • ax-icon-facebook-fill
  • ax-icon-twitter
  • ax-icon-twitter-fill
  • ax-icon-weibo
  • ax-icon-weibo-fill
  • ax-icon-wechat
  • ax-icon-wechat-fill
  • ax-icon-qq
  • ax-icon-qq-fill
  • ax-icon-share
  • ax-icon-share-fill
  • ax-icon-link-open

媒体文件类

  • ax-icon-apply
  • ax-icon-apply-fill
  • ax-icon-calendar
  • ax-icon-calendar-fill
  • ax-icon-printer
  • ax-icon-printer-fill
  • ax-icon-seal
  • ax-icon-seal-fill
  • ax-icon-seal-ok-fill
  • ax-icon-seal-refuse-fill
  • ax-icon-play-o
  • ax-icon-play-o-fill
  • ax-icon-pause
  • ax-icon-pause-o
  • ax-icon-pause-o-fill
  • ax-icon-film
  • ax-icon-film-fill
  • ax-icon-mic
  • ax-icon-mic-fill
  • ax-icon-mic-off
  • ax-icon-mic-off-fill
  • ax-icon-headphones
  • ax-icon-headphones-fill
  • ax-icon-image
  • ax-icon-image-fill
  • ax-icon-image-alt-fill
  • ax-icon-camera
  • ax-icon-camera-fill
  • ax-icon-music
  • ax-icon-music-fill
  • ax-icon-email
  • ax-icon-email-fill
  • ax-icon-video
  • ax-icon-video-fill
  • ax-icon-video-off
  • ax-icon-video-off-fill
  • ax-icon-code
  • ax-icon-code-download
  • ax-icon-code-o
  • ax-icon-code-o-fill
  • ax-icon-download
  • ax-icon-upload
  • ax-icon-cloud-download
  • ax-icon-cloud-upload
  • ax-icon-cloud-download-fill
  • ax-icon-cloud-upload-fill
  • ax-icon-search
  • ax-icon-zoomout
  • ax-icon-zoomin
  • ax-icon-zoomout-fill
  • ax-icon-zoomin-fill
  • ax-icon-file
  • ax-icon-file-remove
  • ax-icon-file-add
  • ax-icon-file-fill
  • ax-icon-file-remove-fill
  • ax-icon-file-add-fill
  • ax-icon-file-text
  • ax-icon-file-text-fill
  • ax-icon-folder
  • ax-icon-folder-open
  • ax-icon-folder-remove
  • ax-icon-folder-add
  • ax-icon-folder-fill
  • ax-icon-folder-open-fill
  • ax-icon-folder-remove-fill
  • ax-icon-folder-add-fill
  • ax-icon-copy
  • ax-icon-copy-fill
  • ax-icon-volume-mute
  • ax-icon-volume-down
  • ax-icon-volume-up
  • ax-icon-volume-off
  • ax-icon-volume-mute-fill
  • ax-icon-volume-down-fill
  • ax-icon-volume-up-fill
  • ax-icon-volume-off-fill
  • ax-icon-attach
  • ax-icon-attach-v
  • ax-icon-link
  • ax-icon-link-h
  • ax-icon-bar
  • ax-icon-pie
  • ax-icon-pie-fill
  • ax-icon-pie-alt-fill
  • ax-icon-bell
  • ax-icon-bell-off
  • ax-icon-bell-fill
  • ax-icon-bell-off-fill
  • ax-icon-compass
  • ax-icon-compass-fill
  • ax-icon-theme
  • ax-icon-theme-fill
  • ax-icon-bulb-t
  • ax-icon-bulb
  • ax-icon-tbulb-fill
  • ax-icon-global
  • ax-icon-global-fill

页面常用图标

  • ax-icon-scan
  • ax-icon-barcode
  • ax-icon-qrcode
  • ax-icon-bag
  • ax-icon-bag-fill
  • ax-icon-cart
  • ax-icon-cart-fill
  • ax-icon-settings
  • ax-icon-settings-fill
  • ax-icon-settings-alt
  • ax-icon-settings-alt-fill
  • ax-icon-shield
  • ax-icon-shield-fill
  • ax-icon-shield-off
  • ax-icon-shield-off-fill
  • ax-icon-people
  • ax-icon-people-fill
  • ax-icon-clock-t
  • ax-icon-clock
  • ax-icon-clock-fill
  • ax-icon-box
  • ax-icon-box-fill
  • ax-icon-empty
  • ax-icon-pin
  • ax-icon-sun-fill
  • ax-icon-tags
  • ax-icon-tags-fill
  • ax-icon-star-half
  • ax-icon-star
  • ax-icon-star-fill
  • ax-icon-wifi
  • ax-icon-wifi-off
  • ax-icon-tv
  • ax-icon-tv-fill
  • ax-icon-cube
  • ax-icon-cube-fill
  • ax-icon-log-in
  • ax-icon-log-out
  • ax-icon-moon
  • ax-icon-moon-fill
  • ax-icon-flash
  • ax-icon-flash-fill
  • ax-icon-flash
  • ax-icon-flash-off-fill
  • ax-icon-trending-down
  • ax-icon-trending-up
  • ax-icon-telephone
  • ax-icon-telephone-fill
  • ax-icon-pc
  • ax-icon-pc-fill
  • ax-icon-pc
  • ax-icon-pc-fill
  • ax-icon-good
  • ax-icon-good-fill
  • ax-icon-bad
  • ax-icon-good-fill
  • ax-icon-org
  • ax-icon-org-fill
  • ax-icon-percent
  • ax-icon-divide
  • ax-icon-align-center
  • ax-icon-align-right
  • ax-icon-align-justify
  • ax-icon-align-left
  • ax-icon-bigger
  • ax-icon-smaller
  • ax-icon-male
  • ax-icon-female
  • ax-icon-umbrella
  • ax-icon-umbrella-fill
  • ax-icon-award
  • ax-icon-award-fill
  • ax-icon-at
  • ax-icon-hash
  • ax-icon-power
  • ax-icon-gift
  • ax-icon-gift-fill
  • ax-icon-quote-left
  • ax-icon-quote-left-fill
  • ax-icon-quote-right
  • ax-icon-quote-right-fill
  • ax-icon-arrowflag
  • ax-icon-fingerprint
  • ax-icon-repair

品牌

  • ax-icon-gitee
  • ax-icon-github
  • ax-icon-google
  • ax-icon-microsoft
  • ax-icon-ios
  • ax-icon-android
  • ax-icon-codepen
  • ax-icon-stackoverflow
  • ax-icon-nodejs
  • ax-icon-oschina
  • ax-icon-csdn
  • ax-icon-tmall
  • ax-icon-jd
  • ax-icon-amazon
  • ax-icon-ebay
  • ax-icon-taobao
  • ax-icon-bilibili
  • ax-icon-youku
  • ax-icon-iqiyi
  • ax-icon-tiktok
  • ax-icon-xunlei
  • ax-icon-huawei
  • ax-icon-aliyun
  • ax-icon-xiaomi
  • ax-icon-zhihu
  • ax-icon-baidu
  • ax-icon-douban
  • ax-icon-163music
  • ax-icon-qqmusic
  • ax-icon-css3
  • ax-icon-html5