icon知識整理 · vue.js

[TOC] ### 使用方法： #### 1. 安裝插件 ~~~ vue add svg-sprite-loader ~~~ #### 2. 創建svg文件夾并編寫index.js文件，以及iconView.vue文件 ~~~ //index.js const requireAll = requireContext => requireContext.keys().map(requireContext); const req = require.context(".", false, /\.svg$/); requireAll(req); ~~~ ~~~  <script> // 獲取所有icon的名稱 const icons = require .context(".", false, /\.svg$/) .keys() .map(name => name.replace(/^\.\/([\w-]+)\.svg/, "$1")); export default { name: "icon-view", render() { return ( <div class="icon-view"> <p>點一點就能取代碼</p> {icons.map(iconName => ( <div class="icon" on-click={() => this.handleIconClick(iconName)}> <ers-icon name={iconName} /> <span class="icon-name">{iconName}</span> </div> ))} </div> ); }, methods: { async handleIconClick(iconName) { await navigator.clipboard.writeText(`<ErsIcon name='${iconName}' />`); this.$Message.success(`${iconName}圖標代碼已復制到剪切板`); } } }; </script> <style lang="scss" scoped> .icon-view { width: 100%; height: 100%; font-size: 32px; p { text-align: center; margin: 10px; } .icon { display: inline-block; text-align: center; margin: 9px 8px; width: 100px; height: 80px; border-radius: 8%; cursor: pointer; i { transition: transform 0.2s; &:hover { transform: scale(1.5); } } .icon-name { font-size: 12px; margin-top: 5px; display: block; } } } </style> ~~~ #### 3. 配置vue.connig.js文件，實現webpack打包svg圖片(項目使用了svg都要配置） ~~~ chainWebpack: config => { // 別名 config.resolve.alias .set("@", resolve("src")) .set("SSLTHC", resolve("src/views/SSLTHC")); // use svg config.module .rule("svg") .exclude.add(resolve("src/icon/svg")) .end(); config.module .rule("icon") .test(/\.svg$/) .include.add(resolve("src/icon/svg")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end(); } ~~~ #### 4. 在main.js文件中注冊使用svg ~~~ // 注冊icon import "@/icon/svg"; ~~~ #### 4. 在項目運行的ip端口后加/svg訪問 ~~~ http://localhost:8080/svg ~~~