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 ~~~