Skip to content

Commit c221a97

Browse files
HerrTopiHerrTopi
committed
feat(ui-scripts): add new ai-colored icon (temp solution)
INSTUI-4551
1 parent 52545d1 commit c221a97

File tree

1 file changed

+233
-6
lines changed

1 file changed

+233
-6
lines changed

‎packages/ui-scripts/lib/icons/generate-react-components.js‎

Lines changed: 233 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,18 +112,20 @@ export { ${name}${variant} }
112112
}
113113

114114
function generateIconIndex(glyphs) {
115-
const content = glyphs
116-
.map((glyph) => {
117-
return `export { ${glyph.name}${glyph.variant} } from './${glyph.name}${glyph.variant}'`
118-
})
119-
.join('\n\n')
120-
115+
let content = glyphs.map((glyph) => {
116+
return `export { ${glyph.name}${glyph.variant} } from './${glyph.name}${glyph.variant}'`
117+
})
118+
//TODO: this is a temp solution it will be removed when icon generation will be overhauled
119+
content.push(`export { IconAiColoredLine } from './IconAiColoredLine'`)
120+
content.push(`export { IconAiColoredSolid } from './IconAiColoredSolid'`)
121+
content = content.join('\n\n')
121122
return NOTICE_HEADER + content
122123
}
123124

124125
export default function generateReactComponents(glyphs, destination) {
125126
glyphs.forEach(async (glyph) => {
126127
const fileName = `${destination}${glyph.name}${glyph.variant}.tsx`
128+
127129
const componentContent = await generateIconComponent(glyph)
128130

129131
fs.writeFile(fileName, componentContent, (err) => {
@@ -134,6 +136,231 @@ export default function generateReactComponents(glyphs, destination) {
134136
})
135137
})
136138

139+
//TODO: this is a temp solution it will be removed when icon generation will be overhauled
140+
fs.writeFile(
141+
'./__build__/IconAiColoredSolid.tsx',
142+
`/*
143+
* The MIT License (MIT)
144+
*
145+
* Copyright (c) 2015 - present Instructure, Inc.
146+
*
147+
* Permission is hereby granted, free of charge, to any person obtaining a copy
148+
* of this software and associated documentation files (the "Software"), to deal
149+
* in the Software without restriction, including without limitation the rights
150+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
151+
* copies of the Software, and to permit persons to whom the Software is
152+
* furnished to do so, subject to the following conditions:
153+
*
154+
* The above copyright notice and this permission notice shall be included in all
155+
* copies or substantial portions of the Software.
156+
*
157+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
158+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
159+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
160+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
161+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
162+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
163+
* SOFTWARE.
164+
*/
165+
import { Component } from 'react'
166+
import { SVGIcon } from '@instructure/ui-svg-images'
167+
import type { SVGIconProps } from '@instructure/ui-svg-images'
168+
169+
class IconAiColoredSolid extends Component<SVGIconProps> {
170+
static glyphName = 'ai-colored'
171+
static variant = 'Solid'
172+
static displayName = 'IconAiColoredSolid'
173+
174+
// eslint-disable-next-line react/forbid-foreign-prop-types
175+
static propTypes = { ...SVGIcon.propTypes }
176+
static allowedProps = [...SVGIcon.allowedProps]
177+
178+
ref: Element | null = null
179+
180+
handleRef = (el: Element | null) => {
181+
const { elementRef } = this.props
182+
183+
this.ref = el
184+
185+
if (typeof elementRef === 'function') {
186+
elementRef(el)
187+
}
188+
}
189+
190+
render() {
191+
192+
return (
193+
<SVGIcon
194+
{...this.props}
195+
name="IconAiColored"
196+
viewBox="0 0 1920 1920"
197+
elementRef={this.handleRef}
198+
199+
>
200+
<g clipPath="url(#a)">
201+
<path
202+
fill="url(#b)"
203+
d="m960 0 259.29 700.713L1920 960l-700.71 259.29L960 1920l-259.287-700.71L0 960l700.713-259.287L960 0Z"
204+
/>
205+
<path
206+
fill="url(#c)"
207+
d="m1600 0 86.43 233.571L1920 320l-233.57 86.429L1600 640l-86.43-233.571L1280 320l233.57-86.429L1600 0Z"
208+
/>
209+
</g>
210+
<defs>
211+
<linearGradient
212+
id="b"
213+
x1={-476.25}
214+
x2={-7.617}
215+
y1={-392.727}
216+
y2={3078.25}
217+
gradientUnits="userSpaceOnUse"
218+
>
219+
<stop stopColor="#9E58BD" />
220+
<stop offset={1} stopColor="#00828E" />
221+
</linearGradient>
222+
<linearGradient
223+
id="c"
224+
x1={1121.25}
225+
x2={1277.46}
226+
y1={-130.909}
227+
y2={1026.08}
228+
gradientUnits="userSpaceOnUse"
229+
>
230+
<stop stopColor="#9E58BD" />
231+
<stop offset={1} stopColor="#00828E" />
232+
</linearGradient>
233+
<clipPath id="a">
234+
<path fill="#fff" d="M0 0h1920v1920H0z" />
235+
</clipPath>
236+
</defs>
237+
</SVGIcon>
238+
)
239+
}
240+
}
241+
242+
export default IconAiColoredSolid
243+
export { IconAiColoredSolid }
244+
`,
245+
(err) => {
246+
if (err) {
247+
console.error(err)
248+
}
249+
// file written successfully
250+
}
251+
)
252+
fs.writeFile(
253+
'./__build__/IconAiColoredLine.tsx',
254+
`/*
255+
* The MIT License (MIT)
256+
*
257+
* Copyright (c) 2015 - present Instructure, Inc.
258+
*
259+
* Permission is hereby granted, free of charge, to any person obtaining a copy
260+
* of this software and associated documentation files (the "Software"), to deal
261+
* in the Software without restriction, including without limitation the rights
262+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
263+
* copies of the Software, and to permit persons to whom the Software is
264+
* furnished to do so, subject to the following conditions:
265+
*
266+
* The above copyright notice and this permission notice shall be included in all
267+
* copies or substantial portions of the Software.
268+
*
269+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
270+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
271+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
272+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
273+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
274+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
275+
* SOFTWARE.
276+
*/
277+
import { Component } from 'react'
278+
import { SVGIcon } from '@instructure/ui-svg-images'
279+
import type { SVGIconProps } from '@instructure/ui-svg-images'
280+
281+
class IconAiColoredLine extends Component<SVGIconProps> {
282+
static glyphName = 'ai-colored'
283+
static variant = 'Line'
284+
static displayName = 'IconAiColoredLine'
285+
286+
// eslint-disable-next-line react/forbid-foreign-prop-types
287+
static propTypes = { ...SVGIcon.propTypes }
288+
static allowedProps = [...SVGIcon.allowedProps]
289+
290+
ref: Element | null = null
291+
292+
handleRef = (el: Element | null) => {
293+
const { elementRef } = this.props
294+
295+
this.ref = el
296+
297+
if (typeof elementRef === 'function') {
298+
elementRef(el)
299+
}
300+
}
301+
302+
render() {
303+
304+
return (
305+
<SVGIcon
306+
{...this.props}
307+
name="IconAiColored"
308+
viewBox="0 0 1920 1920"
309+
elementRef={this.handleRef}
310+
311+
>
312+
<g clipPath="url(#a)">
313+
<path
314+
fill="url(#b)"
315+
d="m960 0 259.29 700.713L1920 960l-700.71 259.29L960 1920l-259.287-700.71L0 960l700.713-259.287L960 0Z"
316+
/>
317+
<path
318+
fill="url(#c)"
319+
d="m1600 0 86.43 233.571L1920 320l-233.57 86.429L1600 640l-86.43-233.571L1280 320l233.57-86.429L1600 0Z"
320+
/>
321+
</g>
322+
<defs>
323+
<linearGradient
324+
id="b"
325+
x1={-476.25}
326+
x2={-7.617}
327+
y1={-392.727}
328+
y2={3078.25}
329+
gradientUnits="userSpaceOnUse"
330+
>
331+
<stop stopColor="#9E58BD" />
332+
<stop offset={1} stopColor="#00828E" />
333+
</linearGradient>
334+
<linearGradient
335+
id="c"
336+
x1={1121.25}
337+
x2={1277.46}
338+
y1={-130.909}
339+
y2={1026.08}
340+
gradientUnits="userSpaceOnUse"
341+
>
342+
<stop stopColor="#9E58BD" />
343+
<stop offset={1} stopColor="#00828E" />
344+
</linearGradient>
345+
<clipPath id="a">
346+
<path fill="#fff" d="M0 0h1920v1920H0z" />
347+
</clipPath>
348+
</defs>
349+
</SVGIcon>
350+
)
351+
}
352+
}
353+
354+
export default IconAiColoredLine
355+
export { IconAiColoredLine }
356+
`,
357+
(err) => {
358+
if (err) {
359+
console.error(err)
360+
}
361+
// file written successfully
362+
}
363+
)
137364
const indexFilePath = `${destination}index.ts`
138365
const indexContent = generateIconIndex(glyphs)
139366
fs.writeFile(indexFilePath, indexContent, (err) => {

0 commit comments

Comments
 (0)