vue view design 图标选择器

代码来自
添加链接描述

<template>
<!--    right-->
<!--    placement="bottom"-->
    <Poptip   content="content" placement="right" v-model="show" >
<!--        <Button type="success">选择图标</Button>-->
        <Button type="normal">选择图标</Button>
        <div   slot="content">
            <Input v-model="search" clearable/>
            <br/>
<!--            style="line-height: 30px; height: 300px; min-width: 300px; overflow-y: auto ;"-->
<!--            :gutter="10"-->
<!--            :gutter="20"-->
            <Row  class="iconRow" >
<!--                https://iview.github.io/components/icon-->
<!--                <i-col :type="icon" :span="8" v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer"  >-->
<!--                    <i :class="'fa fa-' + icon" @click="changeIcon(icon)"/><span @click="changeIcon(icon)">&nbsp;{{icon}}</span>-->
<!--                </i-col>-->
<!--                type="ionic"-->
<!--                :span="8"-->
<!--                <Icon :type="icon" @click="changeIcon(icon)" :span="8" v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer"  >-->
<!--&lt;!&ndash;                    <i :class="'fa fa-' + icon" @click="changeIcon(icon)"/>&ndash;&gt;-->
<!--                    <span @click="changeIcon(icon)">&nbsp;{{icon}}</span>-->
<!--                </Icon>-->
<!--                :span="8"-->
<!--                :span="14"-->
                <div class="oneIcon" @click="changeIcon(icon)"  v-for="icon in faIconsFilter" :key="icon" style="cursor: pointer" >
                      <Icon  class="icon-big" :type="icon"></Icon>
                     <span @click="changeIcon(icon)">&nbsp;{{icon}}</span>
                </div>
            </Row>
        </div>
    </Poptip>
</template>
<script>

    import Common from "../utils/common";

    // const faIconsList = [
    //     "glass","th-large","arrow-right","arrow-up","arrow-down","mail-forward","share",
    //     "expand","compress","plus","minus","asterisk","th","exclamation-circle","gift","leaf","fire",
    //     "eye","eye-slash","warning","exclamation-triangle","plane","calendar","th-list","random","comment","magnet","chevron-up","chevron-down","retweet","shopping-cart","folder","folder-open","arrows-v","check","arrows-h","bar-chart-o","bar-chart","twitter-square","facebook-square","camera-retro","key","gears","cogs","comments","remove","thumbs-o-up","thumbs-o-down","star-half","heart-o","sign-out","linkedin-square","thumb-tack","external-link","sign-in","trophy","close","github-square","upload","lemon-o","phone","square-o","bookmark-o","phone-square","twitter","facebook","github","times","unlock","credit-card","rss","hdd-o","bullhorn","bell","certificate","hand-o-right","hand-o-left","hand-o-up","search-plus","hand-o-down","arrow-circle-left","arrow-circle-right","arrow-circle-up","arrow-circle-down","globe","wrench","tasks","filter","briefcase","search-minus","arrows-alt","group","users","chain","link","cloud","flask","cut","scissors","copy","power-off","files-o","paperclip","save","floppy-o","square","navicon","reorder","bars","list-ul","list-ol","music","signal","strikethrough","underline","table","magic","truck","pinterest","pinterest-square","google-plus-square","google-plus","money","gear","caret-down","caret-up","caret-left","caret-right","columns","unsorted","sort","sort-down","sort-desc","sort-up","cog","sort-asc","envelope","linkedin","rotate-left","undo","legal","gavel","dashboard","tachometer","comment-o","trash-o","comments-o","flash","bolt","sitemap","umbrella","paste","clipboard","lightbulb-o","exchange","cloud-download","home","cloud-upload","user-md","stethoscope","suitcase","bell-o","coffee","cutlery","file-text-o","building-o","hospital-o","file-o","ambulance","medkit","fighter-jet","beer","h-square","plus-square","angle-double-left","angle-double-right","angle-double-up","angle-double-down","clock-o","angle-left","angle-right","angle-up","angle-down","desktop","laptop","tablet","mobile-phone","mobile","circle-o","road","quote-left","quote-right","spinner","circle","mail-reply","reply","github-alt","folder-o","folder-open-o","smile-o","download","frown-o","meh-o","gamepad","keyboard-o","flag-o","flag-checkered","terminal","code","mail-reply-all","reply-all","arrow-circle-o-down","star-half-empty","star-half-full","star-half-o","location-arrow","crop","code-fork","unlink","chain-broken","question","info","search","arrow-circle-o-up","exclamation","superscript","subscript","eraser","puzzle-piece","microphone","microphone-slash","shield","calendar-o","fire-extinguisher","inbox","rocket","maxcdn","chevron-circle-left","chevron-circle-right","chevron-circle-up","chevron-circle-down","html5","css3","anchor","unlock-alt","play-circle-o","bullseye","ellipsis-h","ellipsis-v","rss-square","play-circle","ticket","minus-square","minus-square-o","level-up","level-down","rotate-right","check-square","pencil-square","external-link-square","share-square","compass","toggle-down","caret-square-o-down","toggle-up","caret-square-o-up","toggle-right","repeat","caret-square-o-right","euro","eur","gbp","dollar","usd","rupee","inr","cny","rmb","refresh","yen","jpy","ruble","rouble","rub","won","krw","bitcoin","btc","file","list-alt","file-text","sort-alpha-asc","sort-alpha-desc","sort-amount-asc","sort-amount-desc","sort-numeric-asc","sort-numeric-desc","thumbs-up","thumbs-down","youtube-square","lock","youtube","xing","xing-square","youtube-play","dropbox","stack-overflow","instagram","flickr","adn","bitbucket","flag","bitbucket-square","tumblr","tumblr-square","long-arrow-down","long-arrow-up","long-arrow-left","long-arrow-right","apple","windows","android","headphones","linux","dribbble","skype","foursquare","trello","female","male","gittip","sun-o","moon-o","envelope-o","volume-off","archive","bug","vk","weibo","renren","pagelines","stack-exchange","arrow-circle-o-right","arrow-circle-o-left","toggle-left","volume-down","caret-square-o-left","dot-circle-o","wheelchair","vimeo-square","turkish-lira","try","plus-square-o","space-shuttle","slack","envelope-square","volume-up","wordpress","openid","institution","bank","university","mortar-board","graduation-cap","yahoo","google","reddit","qrcode","reddit-square","stumbleupon-circle","stumbleupon","delicious","digg","pied-piper","pied-piper-alt","drupal","joomla","language","barcode","fax","building","child","paw","spoon","cube","cubes","behance","behance-square","steam","tag","steam-square","recycle","automobile","car","cab","taxi","tree","spotify","deviantart","soundcloud","tags","database","file-pdf-o","file-word-o","file-excel-o","file-powerpoint-o","file-photo-o","file-picture-o","file-image-o","file-zip-o","file-archive-o","book","file-sound-o","file-audio-o","file-movie-o","file-video-o","file-code-o","vine","codepen","jsfiddle","life-bouy","life-buoy","bookmark","life-saver","support","life-ring","circle-o-notch","ra","rebel","ge","empire","git-square","git","print","hacker-news","tencent-weibo","qq","wechat","weixin","send","paper-plane","send-o","paper-plane-o","history","heart","camera","circle-thin","header","paragraph","sliders","share-alt","share-alt-square","bomb","soccer-ball-o","futbol-o","tty","font","binoculars","plug","slideshare","twitch","yelp","newspaper-o","wifi","calculator","paypal","google-wallet","bold","cc-visa","cc-mastercard","cc-discover","cc-amex","cc-paypal","cc-stripe","bell-slash","bell-slash-o","trash","copyright","italic","at","eyedropper","paint-brush","birthday-cake","area-chart","pie-chart","line-chart","lastfm","lastfm-square","toggle-off","text-height","toggle-on","bicycle","bus","ioxhost","angellist","cc","shekel","sheqel","ils","meanpath","text-width","align-left","align-center","align-right","align-justify","star","list","dedent","outdent","indent","video-camera","photo","image","picture-o","pencil","map-marker","star-o","adjust","tint","edit","pencil-square-o","share-square-o","check-square-o","arrows","step-backward","fast-backward","backward","user","play","pause","stop","forward","fast-forward","step-forward","eject","chevron-left","chevron-right","plus-circle","film","minus-circle","times-circle","check-circle","question-circle","info-circle","crosshairs","times-circle-o","check-circle-o","ban","arrow-left"
    // ]
    const faIconsList=Common.viewDesignIconList
    export default{
        model: {
            prop: 'value',
            event: 'input'
        },
        props: {
            value: ''
        },
        components: {},
        data: function () {
            return {
                search: '',
                show: false
            }
        },
        computed: {
            faIconsFilter(){
                if(this.search == null || this.search.length == 0){
                    return faIconsList;
                }
                return faIconsList.filter(item => {
                    return item.indexOf(this.search) != -1;
                })
            }
        },
        created: function () {

        },
        methods: {
            changeIcon(icon){
                console.log(icon)
                this.show = false;
                this.$emit("input", icon);
            }
        }
    }
</script>
<style scoped>

    .icon-big{
        font-size: 30px;
    }
    .oneIcon{
        /*margin-left: 2px;*/
        margin-left: 10px;
    }
    .iconRow{
        /*font-size: 20px;*/
        /*font-size: 30px;*/
        /*line-height: 30px;*/
        /*height: 300px;*/
        height: 800px;
        width: 600px;
        /*min-width: 300px;*/
        /*overflow-y: auto ;*/
    }
</style>

<template>
    <div>
        <Icon type="ionic"></Icon>
<!--        <Icon :type="ios-archive" :size="iconSize"></Icon>-->
        <Icon type="ios-archive" ></Icon>
        <FaIconChooser v-model="icon" ></FaIconChooser> <span v-if="icon">&nbsp;<i :class="'fa fa-'+ icon"/>&nbsp;{{icon}}</span>
    </div>
</template>
<script>
    // import FaIconChooser from './FaIconChooser.vue';
    // import FaIconChooser from '/FaIconChooser.vue';
    // import AlbumManage from "../manage/AlbumManage";
    import FaIconChooser from "../components/FaIconChooser";
    export default{
        components: {
            FaIconChooser,
            // FaIconChooser
        },
        data: function () {
            return { icon: null}
        }
    }
</script>

let  viewDesignIconList=[
    "ios-add",
    "md-add",
    "ios-add-circle",
    "ios-add-circle-outline",
    "md-add-circle",
    "ios-alarm",
    "ios-alarm-outline",
    "md-alarm",
    "ios-albums",
    "ios-albums-outline",
    "md-albums",
    "ios-alert",
    "ios-alert-outline",
    "md-alert",
    "ios-american-football",
    "ios-american-football-outline",
    "md-american-football",
    "ios-analytics",
    "ios-analytics-outline",
    "md-analytics",
    "logo-android",
    "logo-angular",
    "ios-aperture",
    "ios-aperture-outline",
    "md-aperture",
    "logo-apple",
    "ios-apps",
    "ios-apps-outline",
    "md-apps",
    "ios-appstore",
    "ios-appstore-outline",
    "md-appstore",
    "ios-archive",
    "ios-archive-outline",
    "md-archive",
    "ios-arrow-back",
    "md-arrow-back",
    "ios-arrow-down",
    "md-arrow-down",
    "ios-arrow-dropdown",
    "md-arrow-dropdown",
    "ios-arrow-dropdown-circle",
    "md-arrow-dropdown-circle",
    "ios-arrow-dropleft",
    "md-arrow-dropleft",
    "ios-arrow-dropleft-circle",
    "md-arrow-dropleft-circle",
    "ios-arrow-dropright",
    "md-arrow-dropright",
    "ios-arrow-dropright-circle",
    "md-arrow-dropright-circle",
    "ios-arrow-dropup",
    "md-arrow-dropup",
    "ios-arrow-dropup-circle",
    "md-arrow-dropup-circle",
    "ios-arrow-forward",
    "md-arrow-forward",
    "ios-arrow-round-back",
    "md-arrow-round-back",
    "ios-arrow-round-down",
    "md-arrow-round-down",
    "ios-arrow-round-forward",
    "md-arrow-round-forward",
    "ios-arrow-round-up",
    "md-arrow-round-up",
    "ios-arrow-up",
    "md-arrow-up",
    "ios-at",
    "ios-at-outline",
    "md-at",
    "ios-attach",
    "md-attach",
    "ios-backspace",
    "ios-backspace-outline",
    "md-backspace",
    "ios-barcode",
    "ios-barcode-outline",
    "md-barcode",
    "ios-baseball",
    "ios-baseball-outline",
    "md-baseball",
    "ios-basket",
    "ios-basket-outline",
    "md-basket",
    "ios-basketball",
    "ios-basketball-outline",
    "md-basketball",
    "ios-battery-charging",
    "md-battery-charging",
    "ios-battery-dead",
    "md-battery-dead",
    "ios-battery-full",
    "md-battery-full",
    "ios-beaker",
    "ios-beaker-outline",
    "md-beaker",
    "ios-beer",
    "ios-beer-outline",
    "md-beer",
    "ios-bicycle",
    "md-bicycle",
    "logo-bitcoin",
    "ios-bluetooth",
    "md-bluetooth",
    "ios-boat",
    "ios-boat-outline",
    "md-boat",
    "ios-body",
    "ios-body-outline",
    "md-body",
    "ios-bonfire",
    "ios-bonfire-outline",
    "md-bonfire",
    "ios-book",
    "ios-book-outline",
    "md-book",
    "ios-bookmark",
    "ios-bookmark-outline",
    "md-bookmark",
    "ios-bookmarks",
    "ios-bookmarks-outline",
    "md-bookmarks",
    "ios-bowtie",
    "ios-bowtie-outline",
    "md-bowtie",
    "ios-briefcase",
    "ios-briefcase-outline",
    "md-briefcase",
    "ios-browsers",
    "ios-browsers-outline",
    "md-browsers",
    "ios-brush",
    "ios-brush-outline",
    "md-brush",
    "logo-buffer",
    "ios-bug",
    "ios-bug-outline",
    "md-bug",
    "ios-build",
    "ios-build-outline",
    "md-build",
    "ios-bulb",
    "ios-bulb-outline",
    "md-bulb",
    "ios-bus",
    "ios-bus-outline",
    "md-bus",
    "ios-cafe",
    "ios-cafe-outline",
    "md-cafe",
    "ios-calculator",
    "ios-calculator-outline",
    "md-calculator",
    "ios-calendar",
    "ios-calendar-outline",
    "md-calendar",
    "ios-call",
    "ios-call-outline",
    "md-call",
    "ios-camera",
    "ios-camera-outline",
    "md-camera",
    "ios-car",
    "ios-car-outline",
    "md-car",
    "ios-card",
    "ios-card-outline",
    "md-card",
    "ios-cart",
    "ios-cart-outline",
    "md-cart",
    "ios-cash",
    "ios-cash-outline",
    "md-cash",
    "ios-chatboxes",
    "ios-chatboxes-outline",
    "md-chatboxes",
    "ios-chatbubbles",
    "ios-chatbubbles-outline",
    "md-chatbubbles",
    "ios-checkbox",
    "ios-checkbox-outline",
    "md-checkbox",
    "md-checkbox-outline",
    "ios-checkmark",
    "md-checkmark",
    "ios-checkmark-circle",
    "ios-checkmark-circle-outline",
    "md-checkmark-circle",
    "md-checkmark-circle-outline",
    "logo-chrome",
    "ios-clipboard",
    "ios-clipboard-outline",
    "md-clipboard",
    "ios-clock",
    "ios-clock-outline",
    "md-clock",
    "ios-close",
    "md-close",
    "ios-close-circle",
    "ios-close-circle-outline",
    "md-close-circle",
    "ios-closed-captioning",
    "ios-closed-captioning-outline",
    "md-closed-captioning",
    "ios-cloud",
    "ios-cloud-outline",
    "md-cloud",
    "ios-cloud-circle",
    "ios-cloud-circle-outline",
    "md-cloud-circle",
    "ios-cloud-done",
    "ios-cloud-done-outline",
    "md-cloud-done",
    "ios-cloud-download",
    "ios-cloud-download-outline",
    "md-cloud-download",
    "md-cloud-outline",
    "ios-cloud-upload",
    "ios-cloud-upload-outline",
    "md-cloud-upload",
    "ios-cloudy",
    "ios-cloudy-outline",
    "md-cloudy",
    "ios-cloudy-night",
    "ios-cloudy-night-outline",
    "md-cloudy-night",
    "ios-code",
    "md-code",
    "ios-code-download",
    "md-code-download",
    "ios-code-working",
    "md-code-working",
    "logo-codepen",
    "ios-cog",
    "ios-cog-outline",
    "md-cog",
    "ios-color-fill",
    "ios-color-fill-outline",
    "md-color-fill",
    "ios-color-filter",
    "ios-color-filter-outline",
    "md-color-filter",
    "ios-color-palette",
    "ios-color-palette-outline",
    "md-color-palette",
    "ios-color-wand",
    "ios-color-wand-outline",
    "md-color-wand",
    "ios-compass",
    "ios-compass-outline",
    "md-compass",
    "ios-construct",
    "ios-construct-outline",
    "md-construct",
    "ios-contact",
    "ios-contact-outline",
    "md-contact",
    "ios-contacts",
    "ios-contacts-outline",
    "md-contacts",
    "ios-contract",
    "md-contract",
    "ios-contrast",
    "md-contrast",
    "ios-copy",
    "ios-copy-outline",
    "md-copy",
    "ios-create",
    "ios-create-outline",
    "md-create",
    "ios-crop",
    "ios-crop-outline",
    "md-crop",
    "logo-css3",
    "ios-cube",
    "ios-cube-outline",
    "md-cube",
    "ios-cut",
    "ios-cut-outline",
    "md-cut",
    "logo-designernews",
    "ios-desktop",
    "ios-desktop-outline",
    "md-desktop",
    "ios-disc",
    "ios-disc-outline",
    "md-disc",
    "ios-document",
    "ios-document-outline",
    "md-document",
    "ios-done-all",
    "md-done-all",
    "ios-download",
    "ios-download-outline",
    "md-download",
    "logo-dribbble",
    "logo-dropbox",
    "ios-easel",
    "ios-easel-outline",
    "md-easel",
    "ios-egg",
    "ios-egg-outline",
    "md-egg",
    "logo-euro",
    "ios-exit",
    "ios-exit-outline",
    "md-exit",
    "ios-expand",
    "md-expand",
    "ios-eye",
    "ios-eye-outline",
    "md-eye",
    "ios-eye-off",
    "ios-eye-off-outline",
    "md-eye-off",
    "logo-facebook",
    "ios-fastforward",
    "ios-fastforward-outline",
    "md-fastforward",
    "ios-female",
    "md-female",
    "ios-filing",
    "ios-filing-outline",
    "md-filing",
    "ios-film",
    "ios-film-outline",
    "md-film",
    "ios-finger-print",
    "md-finger-print",
    "ios-flag",
    "ios-flag-outline",
    "md-flag",
    "ios-flame",
    "ios-flame-outline",
    "md-flame",
    "ios-flash",
    "ios-flash-outline",
    "md-flash",
    "ios-flask",
    "ios-flask-outline",
    "md-flask",
    "ios-flower",
    "ios-flower-outline",
    "md-flower",
    "ios-folder",
    "ios-folder-outline",
    "md-folder",
    "ios-folder-open",
    "ios-folder-open-outline",
    "md-folder-open",
    "ios-football",
    "ios-football-outline",
    "md-football",
    "logo-foursquare",
    "logo-freebsd-devil",
    "ios-funnel",
    "ios-funnel-outline",
    "md-funnel",
    "ios-game-controller-a",
    "ios-game-controller-a-outline",
    "md-game-controller-a",
    "ios-game-controller-b",
    "ios-game-controller-b-outline",
    "md-game-controller-b",
    "ios-git-branch",
    "md-git-branch",
    "ios-git-commit",
    "md-git-commit",
    "ios-git-compare",
    "md-git-compare",
    "ios-git-merge",
    "md-git-merge",
    "ios-git-network",
    "md-git-network",
    "ios-git-pull-request",
    "md-git-pull-request",
    "logo-github",
    "ios-glasses",
    "ios-glasses-outline",
    "md-glasses",
    "ios-globe",
    "ios-globe-outline",
    "md-globe",
    "logo-google",
    "logo-googleplus",
    "ios-grid",
    "ios-grid-outline",
    "md-grid",
    "logo-hackernews",
    "ios-hammer",
    "ios-hammer-outline",
    "md-hammer",
    "ios-hand",
    "ios-hand-outline",
    "md-hand",
    "ios-happy",
    "ios-happy-outline",
    "md-happy",
    "ios-headset",
    "ios-headset-outline",
    "md-headset",
    "ios-heart",
    "ios-heart-outline",
    "md-heart",
    "md-heart-outline",
    "ios-help",
    "md-help",
    "ios-help-buoy",
    "ios-help-buoy-outline",
    "md-help-buoy",
    "ios-help-circle",
    "ios-help-circle-outline",
    "md-help-circle",
    "ios-home",
    "ios-home-outline",
    "md-home",
    "logo-html5",
    "ios-ice-cream",
    "ios-ice-cream-outline",
    "md-ice-cream",
    "ios-image",
    "ios-image-outline",
    "md-image",
    "ios-images",
    "ios-images-outline",
    "md-images",
    "ios-infinite",
    "ios-infinite-outline",
    "md-infinite",
    "ios-information",
    "md-information",
    "ios-information-circle",
    "ios-information-circle-outline",
    "md-information-circle",
    "logo-instagram",
    "ios-ionic",
    "ios-ionic-outline",
    "md-ionic",
    "ios-ionitron",
    "ios-ionitron-outline",
    "md-ionitron",
    "logo-javascript",
    "ios-jet",
    "ios-jet-outline",
    "md-jet",
    "ios-key",
    "ios-key-outline",
    "md-key",
    "ios-keypad",
    "ios-keypad-outline",
    "md-keypad",
    "ios-laptop",
    "md-laptop",
    "ios-leaf",
    "ios-leaf-outline",
    "md-leaf",
    "ios-link",
    "ios-link-outline",
    "md-link",
    "logo-linkedin",
    "ios-list",
    "md-list",
    "ios-list-box",
    "ios-list-box-outline",
    "md-list-box",
    "ios-locate",
    "ios-locate-outline",
    "md-locate",
    "ios-lock",
    "ios-lock-outline",
    "md-lock",
    "ios-log-in",
    "md-log-in",
    "ios-log-out",
    "md-log-out",
    "ios-magnet",
    "ios-magnet-outline",
    "md-magnet",
    "ios-mail",
    "ios-mail-outline",
    "md-mail",
    "ios-mail-open",
    "ios-mail-open-outline",
    "md-mail-open",
    "ios-male",
    "md-male",
    "ios-man",
    "ios-man-outline",
    "md-man",
    "ios-map",
    "ios-map-outline",
    "md-map",
    "logo-markdown",
    "ios-medal",
    "ios-medal-outline",
    "md-medal",
    "ios-medical",
    "ios-medical-outline",
    "md-medical",
    "ios-medkit",
    "ios-medkit-outline",
    "md-medkit",
    "ios-megaphone",
    "ios-megaphone-outline",
    "md-megaphone",
    "ios-menu",
    "ios-menu-outline",
    "md-menu",
    "ios-mic",
    "ios-mic-outline",
    "md-mic",
    "ios-mic-off",
    "ios-mic-off-outline",
    "md-mic-off",
    "ios-microphone",
    "ios-microphone-outline",
    "md-microphone",
    "ios-moon",
    "ios-moon-outline",
    "md-moon",
    "ios-more",
    "ios-more-outline",
    "md-more",
    "ios-move",
    "md-move",
    "ios-musical-note",
    "ios-musical-note-outline",
    "md-musical-note",
    "ios-musical-notes",
    "ios-musical-notes-outline",
    "md-musical-notes",
    "ios-navigate",
    "ios-navigate-outline",
    "md-navigate",
    "ios-no-smoking",
    "ios-no-smoking-outline",
    "md-no-smoking",
    "logo-nodejs",
    "ios-notifications",
    "ios-notifications-outline",
    "md-notifications",
    "ios-notifications-off",
    "ios-notifications-off-outline",
    "md-notifications-off",
    "md-notifications-outline",
    "ios-nuclear",
    "ios-nuclear-outline",
    "md-nuclear",
    "ios-nutrition",
    "ios-nutrition-outline",
    "md-nutrition",
    "logo-octocat",
    "ios-open",
    "ios-open-outline",
    "md-open",
    "ios-options",
    "ios-options-outline",
    "md-options",
    "ios-outlet",
    "ios-outlet-outline",
    "md-outlet",
    "ios-paper",
    "ios-paper-outline",
    "md-paper",
    "ios-paper-plane",
    "ios-paper-plane-outline",
    "md-paper-plane",
    "ios-partly-sunny",
    "ios-partly-sunny-outline",
    "md-partly-sunny",
    "ios-pause",
    "ios-pause-outline",
    "md-pause",
    "ios-paw",
    "ios-paw-outline",
    "md-paw",
    "ios-people",
    "ios-people-outline",
    "md-people",
    "ios-person",
    "ios-person-outline",
    "md-person",
    "ios-person-add",
    "ios-person-add-outline",
    "md-person-add",
    "ios-phone-landscape",
    "md-phone-landscape",
    "ios-phone-portrait",
    "md-phone-portrait",
    "ios-photos",
    "ios-photos-outline",
    "md-photos",
    "ios-pie",
    "ios-pie-outline",
    "md-pie",
    "ios-pin",
    "ios-pin-outline",
    "md-pin",
    "ios-pint",
    "ios-pint-outline",
    "md-pint",
    "logo-pinterest",
    "ios-pizza",
    "ios-pizza-outline",
    "md-pizza",
    "ios-plane",
    "ios-plane-outline",
    "md-plane",
    "ios-planet",
    "ios-planet-outline",
    "md-planet",
    "ios-play",
    "ios-play-outline",
    "md-play",
    "logo-playstation",
    "ios-podium",
    "ios-podium-outline",
    "md-podium",
    "ios-power",
    "ios-power-outline",
    "md-power",
    "ios-pricetag",
    "ios-pricetag-outline",
    "md-pricetag",
    "ios-pricetags",
    "ios-pricetags-outline",
    "md-pricetags",
    "ios-print",
    "ios-print-outline",
    "md-print",
    "ios-pulse",
    "ios-pulse-outline",
    "md-pulse",
    "logo-python",
    "ios-qr-scanner",
    "md-qr-scanner",
    "ios-quote",
    "ios-quote-outline",
    "md-quote",
    "ios-radio",
    "ios-radio-outline",
    "md-radio",
    "ios-radio-button-off",
    "md-radio-button-off",
    "ios-radio-button-on",
    "md-radio-button-on",
    "ios-rainy",
    "ios-rainy-outline",
    "md-rainy",
    "ios-recording",
    "ios-recording-outline",
    "md-recording",
    "logo-reddit",
    "ios-redo",
    "ios-redo-outline",
    "md-redo",
    "ios-refresh",
    "md-refresh",
    "ios-refresh-circle",
    "ios-refresh-circle-outline",
    "md-refresh-circle",
    "ios-remove",
    "md-remove",
    "ios-remove-circle",
    "ios-remove-circle-outline",
    "md-remove-circle",
    "ios-reorder",
    "md-reorder",
    "ios-repeat",
    "md-repeat",
    "ios-resize",
    "md-resize",
    "ios-restaurant",
    "ios-restaurant-outline",
    "md-restaurant",
    "ios-return-left",
    "md-return-left",
    "ios-return-right",
    "md-return-right",
    "ios-reverse-camera",
    "ios-reverse-camera-outline",
    "md-reverse-camera",
    "ios-rewind",
    "ios-rewind-outline",
    "md-rewind",
    "ios-ribbon",
    "ios-ribbon-outline",
    "md-ribbon",
    "ios-rose",
    "ios-rose-outline",
    "md-rose",
    "logo-rss",
    "ios-sad",
    "ios-sad-outline",
    "md-sad",
    "logo-sass",
    "ios-school",
    "ios-school-outline",
    "md-school",
    "ios-search",
    "ios-search-outline",
    "md-search",
    "ios-send",
    "ios-send-outline",
    "md-send",
    "ios-settings",
    "ios-settings-outline",
    "md-settings",
    "ios-share",
    "ios-share-outline",
    "md-share",
    "ios-share-alt",
    "ios-share-alt-outline",
    "md-share-alt",
    "ios-shirt",
    "ios-shirt-outline",
    "md-shirt",
    "ios-shuffle",
    "md-shuffle",
    "ios-skip-backward",
    "ios-skip-backward-outline",
    "md-skip-backward",
    "ios-skip-forward",
    "ios-skip-forward-outline",
    "md-skip-forward",
    "logo-skype",
    "logo-snapchat",
    "ios-snow",
    "ios-snow-outline",
    "md-snow",
    "ios-speedometer",
    "ios-speedometer-outline",
    "md-speedometer",
    "ios-square",
    "ios-square-outline",
    "md-square",
    "md-square-outline",
    "ios-star",
    "ios-star-outline",
    "md-star",
    "ios-star-half",
    "md-star-half",
    "md-star-outline",
    "ios-stats",
    "ios-stats-outline",
    "md-stats",
    "logo-steam",
    "ios-stopwatch",
    "ios-stopwatch-outline",
    "md-stopwatch",
    "ios-subway",
    "ios-subway-outline",
    "md-subway",
    "ios-sunny",
    "ios-sunny-outline",
    "md-sunny",
    "ios-swap",
    "md-swap",
    "ios-switch",
    "ios-switch-outline",
    "md-switch",
    "ios-sync",
    "md-sync",
    "ios-tablet-landscape",
    "md-tablet-landscape",
    "ios-tablet-portrait",
    "md-tablet-portrait",
    "ios-tennisball",
    "ios-tennisball-outline",
    "md-tennisball",
    "ios-text",
    "ios-text-outline",
    "md-text",
    "ios-thermometer",
    "ios-thermometer-outline",
    "md-thermometer",
    "ios-thumbs-down",
    "ios-thumbs-down-outline",
    "md-thumbs-down",
    "ios-thumbs-up",
    "ios-thumbs-up-outline",
    "md-thumbs-up",
    "ios-thunderstorm",
    "ios-thunderstorm-outline",
    "md-thunderstorm",
    "ios-time",
    "ios-time-outline",
    "md-time",
    "ios-timer",
    "ios-timer-outline",
    "md-timer",
    "ios-train",
    "ios-train-outline",
    "md-train",
    "ios-transgender",
    "md-transgender",
    "ios-trash",
    "ios-trash-outline",
    "md-trash",
    "ios-trending-down",
    "md-trending-down",
    "ios-trending-up",
    "md-trending-up",
    "ios-trophy",
    "ios-trophy-outline",
    "md-trophy",
    "logo-tumblr",
    "logo-tux",
    "logo-twitch",
    "logo-twitter",
    "ios-umbrella",
    "ios-umbrella-outline",
    "md-umbrella",
    "ios-undo",
    "ios-undo-outline",
    "md-undo",
    "ios-unlock",
    "ios-unlock-outline",
    "md-unlock",
    "logo-usd",
    "ios-videocam",
    "ios-videocam-outline",
    "md-videocam",
    "logo-vimeo",
    "ios-volume-down",
    "md-volume-down",
    "ios-volume-mute",
    "md-volume-mute",
    "ios-volume-off",
    "md-volume-off",
    "ios-volume-up",
    "md-volume-up",
    "ios-walk",
    "md-walk",
    "ios-warning",
    "ios-warning-outline",
    "md-warning",
    "ios-watch",
    "md-watch",
    "ios-water",
    "ios-water-outline",
    "md-water",
    "logo-whatsapp",
    "ios-wifi",
    "ios-wifi-outline",
    "md-wifi",
    "logo-windows",
    "ios-wine",
    "ios-wine-outline",
    "md-wine",
    "ios-woman",
    "ios-woman-outline",
    "md-woman",
    "logo-wordpress",
    "logo-xbox",
    "logo-yahoo",
    "logo-yen",
    "logo-youtube",
    "ios-loading"
]

获取icon名字，爬取网页
view design 官网 icons

// let  iconList =  document.getElementsByClassName("page-icon-search-list")[0]
// let  iconList =  document.getElementsByClassName("page-icon-search-item")[0]
let  iconList =  document.getElementsByClassName("page-icon-search-item")
let iconNames=[]
for (var i = 0; i < iconList.length; i++) {
   let  iconDom=   iconList[i]
   let  name=   iconDom.textContent
    // console.log(name)
    iconNames.push(name)
}
// iconList.ste
// let iconNames=  iconList.map(o=>o.textContent)
console.log(iconNames)